首页 > 其他 > 详细

浏览器引入 Antd 直接使用的示例

时间:2020-04-14 19:14:57      阅读:143      评论:0      收藏:0      [点我收藏+]

在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd。

  1. 首先需要引入相关JS类库,因为类库之间有依赖关系,不要改变顺序。
  2. 编写 text/babel 代码,使用antd组件需要加上 antd. 才能正常使用。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Antd</title>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.0.2/antd.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.0.2/antd.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
  state = {
    date: null,
  };
  handleChange = date => {
    antd.message.info(`您选择的日期是: ${date ? date.format(‘YYYY-MM-DD‘) : ‘未选择‘}`);
    this.setState({ date });
  };
  render() {
    const { date } = this.state;
    return (
      <antd.ConfigProvider>
        <div style={{ width: 400, margin: ‘100px auto‘ }}>
          <antd.DatePicker onChange={this.handleChange} />
          <div style={{ marginTop: 20 }}>
            当前日期:{date ? date.format(‘YYYY-MM-DD‘) : ‘未选择‘}
          </div>
        </div>
      </antd.ConfigProvider>
    );
  }
}
ReactDOM.render(<App />, document.getElementById(‘root‘));
</script>
</body>
</html> 

浏览器引入 Antd 直接使用的示例

原文:https://www.cnblogs.com/relucent/p/12700051.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!