mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-18 11:18:14 +08:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

docs: adjust the sample code to React 18 (#40372)

Browse Source 
* docs: Adjust the sample code to React 18

* fix
This commit is contained in:
lijianan 2023-01-29 00:28:59 +08:00 committed by GitHub
parent d4ad66ba48
commit ba8e646346
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/icon/index.en-US.md
View File

@ -106,13 +106,14 @@ We added a `createFromIconfontCN` function to help developer use their own icons
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generate in iconfont.cn
});
ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
ReactDOM.createRoot(mountNode).render(<MyIcon type="icon-example" />);
```
It creates a component that uses SVG sprites in essence.
@ -153,12 +154,14 @@ module.exports = {
```
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import Icon from '@ant-design/icons';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
// in create-react-app:
// import { ReactComponent as MessageSvg } from 'path/to/message.svg';
ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
```
The following properties are available for the component:

9
components/icon/index.zh-CN.md
View File

@ -101,13 +101,14 @@ getTwoToneColor(); // #eb2f96
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
ReactDOM.createRoot(mountNode).render(<MyIcon type="icon-example" />);
```
其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
@ -148,12 +149,14 @@ module.exports = {
```
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import Icon from '@ant-design/icons';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
import MessageSvg from 'path/to/message.svg'; // 你的 '*.svg' 文件路径
// in create-react-app:
// import { ReactComponent as MessageSvg } from 'path/to/message.svg';
ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
```
`Icon` 中的 `component` 组件的接受的属性如下：

2
docs/react/i18n.en-US.md
View File

@ -102,7 +102,7 @@ See more usage at [ConfigProvider](/components/config-provider).
## Adding new language
If your language is not in above list, feel free to create a locale package based on the [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) language pack and send us a pull request. For reference, you can refer to the pull request of adding the [Azerbaijani](https://github.com/ant-design/ant-design/pull/21387) language as a sample.
If your language is not in above list, feel free to create a locale package based on the [en_US](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.ts) language pack and send us a pull request. For reference, you can refer to the pull request of adding the [Azerbaijani](https://github.com/ant-design/ant-design/pull/21387) language as a sample.
Do it step by step:

2
docs/react/i18n.zh-CN.md
View File

@ -99,7 +99,7 @@ return (
## 增加语言包
如果你找不到你需要的语言包，欢迎你在 [英文语言包](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.tsx) 的基础上创建一个新的语言包，并给我们发一个 Pull Request，可以参考 [阿塞拜疆语的 PR](https://github.com/ant-design/ant-design/pull/21387)。
如果你找不到你需要的语言包，欢迎你在 [英文语言包](https://github.com/ant-design/ant-design/blob/master/components/locale/en_US.ts) 的基础上创建一个新的语言包，并给我们发一个 Pull Request，可以参考 [阿塞拜疆语的 PR](https://github.com/ant-design/ant-design/pull/21387)。
基本步骤如下：