HTML引用React 和 Ant Design

深碍√TFBOYSˉ_ 2022-05-10 07:52 284阅读 0赞

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>