react-jsx

作者: antlove | 来源:发表于2020-11-01 14:07 被阅读0次
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>react prototype</title>
        <style>
            a {
                display: block;
                width: 50px;
                height: 20px;
                border: 1px solid #ccc;
                border-radius: 4px;
                text-align: center;
                line-height: 20px;
                font-size:12xp;
                cursor: pointer;
                user-select:none;
            }
            a:hover {
                background-color: #eaeaea;
            }
            
        </style>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="like_button_container"></div>
    
        <script type="text/babel">
            // 创建element
            const element = <a onClick={() => console.log('trigger click jsx')}><span>Like</span></a>;
            // 获取dom元素
            const domContainer = document.querySelector('#like_button_container');
            // 渲染
            ReactDOM.render(element, domContainer);
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:react-jsx

          本文链接:https://www.haomeiwen.com/subject/bjnyvktx.html