reactJS04 - reactjs简单渲染一个导航栏

来源：互联网发布：tfboys官方周边淘宝店编辑：程序博客网时间：2024/06/06 00:51

<!DOCTYPE html><html><head>    <title>初始</title>    <meta charset="utf-8">    <script src="build/react.js"></script>    <script src="build/react-dom.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>    <style type="text/css">        *{padding: 0;margin: 0}        #navbar{position: fixed;width: 100%;height: 60px;background-color: #222;}        #navbar li{float: left;line-height: 60px;margin-left: 10px;display: inline-block;}        #navbar li a{color: #fff;text-decoration: none;}    </style></head><body>    <div id="navbar">    </div>    <div id="container"></div>    <div id="footer"></div>    <script type="text/babel">        <!-- 定义函数 -->        function abc(){            alert(123)        }        <!--             如果想在a标签加onclick事件呢？            注意点：1.驼峰命名 onclick => onClick                   2.onClick后面的内容用{}来代表是javascript，且需要传入函数(匿名函数也可)，也就是function         -->        var nav_li = [                        <li><a href="" onClick={abc}>最新电影</a></li>,                        <li><a href="" onClick={function(){alert(456)}}>最新评论</a></li>                    ]        ReactDOM.render(            <ul>{nav_li}</ul>,            document.getElementById("navbar")        );    </script></body></html>

这里写图片描述

0 0