在瀏覽器中使用 script 和 link 標簽直接引入文件，並使用全局變量 antd。
- 首先需要引入相關JS類庫，因為類庫之間有依賴關系，不要改變順序。
- 編寫 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>