mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-05 23:46:28 +08:00
parent
ce2360daa6
commit
cffd1e63d4
@ -8,7 +8,7 @@ import Sidebar from '../../slots/Sidebar';
|
||||
const useStyle = () => ({
|
||||
main: css`
|
||||
display: flex;
|
||||
margintop: 40;
|
||||
margin-top: 40px;
|
||||
`,
|
||||
});
|
||||
|
||||
|
@ -15,7 +15,7 @@ When you need to mention someone or something.
|
||||
|
||||
### Usage upgrade after 5.1.0
|
||||
|
||||
<Alert message="After version 5.1.0, we provide a simpler usage <Mentions options={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0." />;
|
||||
<Alert message="After version 5.1.0, we provide a simpler usage <Mentions options={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0."></Alert>
|
||||
|
||||
```jsx
|
||||
// works when >=5.1.0, recommended ✅
|
||||
@ -23,9 +23,11 @@ const options = [{ value: 'sample', label: 'sample' }];
|
||||
return <Mentions options={options} />;
|
||||
|
||||
// works when <5.1.0, deprecated when >=5.1.0 🙅🏻♀️
|
||||
<Mentions onChange={onChange}>
|
||||
<Mentions.Option value="sample">Sample</Mentions.Option>
|
||||
</Mentions>;
|
||||
return (
|
||||
<Mentions onChange={onChange}>
|
||||
<Mentions.Option value="sample">Sample</Mentions.Option>
|
||||
</Mentions>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
@ -16,7 +16,7 @@ demo:
|
||||
|
||||
### 5.1.0 用法升级
|
||||
|
||||
<Alert message="在 5.1.0 版本后,我们提供了 <Mentions options={[...]} /> 的简写方式,有更好的性能和更方便的数据组织方式,开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法,你还是可以在 5.x 继续使用,但会在控制台看到警告,并会在 6.0 后移除。" />;
|
||||
<Alert message="在 5.1.0 版本后,我们提供了 <Mentions options={[...]} /> 的简写方式,有更好的性能和更方便的数据组织方式,开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法,你还是可以在 5.x 继续使用,但会在控制台看到警告,并会在 6.0 后移除。"></Alert>
|
||||
|
||||
```jsx
|
||||
// >=5.1.0 可用,推荐的写法 ✅
|
||||
@ -24,9 +24,11 @@ const options = [{ value: 'sample', label: 'sample' }];
|
||||
return <Mentions options={options} />;
|
||||
|
||||
// <5.1.0 可用,>=5.1.0 时不推荐 🙅🏻♀️
|
||||
<Mentions onChange={onChange}>
|
||||
<Mentions.Option value="sample">Sample</Mentions.Option>
|
||||
</Mentions>;
|
||||
return (
|
||||
<Mentions onChange={onChange}>
|
||||
<Mentions.Option value="sample">Sample</Mentions.Option>
|
||||
</Mentions>
|
||||
);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
@ -307,7 +307,7 @@ const data: User[] = [
|
||||
export default () => (
|
||||
<>
|
||||
<Table<User> columns={columns} dataSource={data} />
|
||||
/* JSX style usage */
|
||||
{/* JSX style usage */}
|
||||
<Table<User> dataSource={data}>
|
||||
<Table.Column<User> key="name" title="Name" dataIndex="name" />
|
||||
</Table>
|
||||
|
@ -310,7 +310,7 @@ const data: User[] = [
|
||||
export default () => (
|
||||
<>
|
||||
<Table<User> columns={columns} dataSource={data} />
|
||||
/* 使用 JSX 风格的 API */
|
||||
{/* 使用 JSX 风格的 API */}
|
||||
<Table<User> dataSource={data}>
|
||||
<Table.Column<User> key="name" title="Name" dataIndex="name" />
|
||||
</Table>
|
||||
|
Loading…
Reference in New Issue
Block a user