HTML引用React 和 Ant Design

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/BennyShi1998/article/details/82862425

HTML引用React 和 Ant Design分三步走:

第一步:引用React

第二步:引用antd和相关依赖库

第三步:使用antd组件,antd.components

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>antd</title>
    <link rel="https://unpkg.com/antd@3.9.3/dist/antd.min.css" />
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.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>
    <script src="https://unpkg.com/antd@3.9.3/dist/antd.min.js"></script>
</head>

<body>
    <script type="text/babel">
    ReactDOM.render(
      <div>
      Hello antd
      <br/>
      <antd.Button type="primary">Primary</antd.Button>
      </div>,
      document.getElementById("app")
      )
    </script>
    <div id="app"></div>
</body>

</html>

 

踩坑记录:

报错:刚刚直接引入ant时报Uncaught TypeError: Wf(...) is not a function和Uncaught ReferenceError: antd is not defined

原因:antd有个依赖库moment.js没有被引入,所以antd对象不能生成。

解决:把moment.js引入即可,<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

HTML内直接引React.js


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">  
        class TimeNow extends React.Component{
            constructor(){
                super();
                this.state = {
                    time: ''
                }                
            }
            componentDidMount = () =>{
                setInterval(()=>{
                    var time = new Date().toLocaleString();
                    this.setState({
                        time
                    });                    
                }, 1000);
            }           
            render = () => {
                const {time} = this.state;
                return <div>时间:{time}</div>
            }
        }
        class MessageBox extends React.Component{  
            onClick = ()=>{  
                alert('clicked');  
            }
            render = ()=>{  
                return ( <div><h1 onClick={this.onClick}>Hello World!</h1><TimeNow /></div> )  
            }  
        }
        ReactDOM.render( <MessageBox/>,  
            document.getElementById('app'),
        )
    </script>
</body>
</html>

 

展开阅读全文

没有更多推荐了,返回首页