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库,并使用其提供的组件来构建用户界面。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。