antd引入普通html使用，将ant Design本地化

一直想着能本地化antd的，不用npm以及dva那么复杂的配置环境来开发，并且本地化以后对以后链接flask的模板渲染机制也能很好的结合。下面是具体的实现方法：

1.将react的相关链接引入：

<script src="/static/react/react.min.js"></script>
<script src="/static/react/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

也可以用cdn的链接，我以及将react下到本地使用了，链接可能比较卡。

2.将antd引入，只需要下面这两个：

<script src="/static/antd/dist/antd.js"></script>
<link href="/static/antd/dist/antd.css" rel="stylesheet"/>

在之前的dva做的项目中也有，可复制粘贴过来，路径在/dva-quickstart/node_modules/antd/dist...

3.写代码测试一下，html引入：

<div id="message1"></div>
<script type="text/babel" src="/static/components/button.js"></script>

antd组件代码：

// import { Button, Radio, Icon } from 'antd';
ReactDOM.render(
  <div>
    <antd.Button type="primary">Primary</antd.Button>
    <antd.Button>Default</antd.Button>
    <antd.Button type="dashed">Dashed</antd.Button>
    <antd.Button type="danger">Danger</antd.Button>
  </div>
, document.getElementById('message1'));

这需要注意的是，所有组件代码都可从官网中找到，但是import显然是起不到作用的，去掉就行了；

antd是一个对象，Button是其一个组建，引用的时候需要加上antd.才能正常使用。

转载于:https://www.cnblogs.com/cxscode/p/8075125.html