zoukankan      html  css  js  c++  java
  • 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.才能正常使用。

  • 相关阅读:
    razor在App_Code中使用ActionLink无效的解决方案
    科技的进步会给人带来幸福么?
    C6000系列之C6455 DSP的EMIFA接口
    C6000系列之C6455DSP的GPIO模块
    C语言文件操作与例子
    C语言中fscanf函数读取double型浮点数的问题
    MATLAB读取CCS保存的数据
    CCS 3.3 操作C函数读写文件
    复数矩阵乘法C语言实现
    C6000系列之C6455DSP的中断系统
  • 原文地址:https://www.cnblogs.com/cxscode/p/8075125.html
Copyright © 2011-2022 走看看