HTML引用React 和 Ant Design

最新推荐文章于 2024-08-22 15:11:22 发布

BennyShi98

最新推荐文章于 2024-08-22 15:11:22 发布

阅读量9.2k

点赞数 9

分类专栏： React

本文链接：https://blog.csdn.net/BennyShi1998/article/details/82862425

版权

React 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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>