使用CDN方式引入Ant Design（antd）非常简单，只需在HTML文件中添加以下代码：，，“
html，，，，，“，，这段代码将引入Ant Design的CSS文件和JavaScript文件。请确保您的项目已经包含了React和ReactDOM库。在HTML文件中使用CDN方式引入Ant Design（Antd）库，可以通过以下步骤实现：
1、引入React和相关依赖：首先需要引入React、ReactDOM以及Babel等必要的库。
2、引入Antd的CSS样式：通过link标签引入Antd的CSS样式文件。
3、引入Antd的JavaScript文件：通过script标签引入Antd的JavaScript文件。
4、编写React组件并渲染到页面：在JavaScript代码中编写React组件，并使用ReactDOM将组件渲染到指定的DOM节点上。
具体操作如下：
1、引入React和相关依赖：
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/reactdom@18/umd/reactdom.production.min.js"></script> <script src="https://unpkg.com/babelstandalone@6/babel.min.js"></script>
2、引入Antd的CSS样式：
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css">
3、引入Antd的JavaScript文件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.min.js"></script>
4、编写React组件并渲染到页面：
<div id="app"></div>
<script type="text/babel">
const Text = (props) => {
const [name, setName] = React.useState('张三');
return <div className="title">{name}</div>;
};
const Page = () => {
const touchClick = () => {
console.log('点击 + 1');
};
return (
<div>
<Text />
<antd.Button type="primary" onClick={touchClick}>Primary Button</antd.Button>
</div>
);
};
ReactDOM.render(<Page />, document.querySelector("#app"));
</script>
通过以上步骤，可以在HTML文件中成功引入Ant Design库，并使用其提供的组件来构建用户界面。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1227811.html
