笔记四、React的JSX如何动态渲染数据？

柔光的暖阳◎ 2024-05-01 16:22 73阅读 0赞

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <div id="root"></div>
    <script
            crossorigin
            src="https://unpkg.com/react@18.2/umd/react.development.js"
    ></script>
    
    <script
            crossorigin
            src="https://unpkg.com/react-dom@18.2/umd/react-dom.development.js"
    ></script>
    
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 遍历的数组
        const personList = ["张三", "李四", "王五", "赵六", "刘能"];
        // 创建虚拟 dom
        const vdom = (
            <>
                <h1 style={
       {color: "red", fontSize: "40px"}}>人员列表</h1>
                <ul>
                    {
                        // 第一种写法
                        // personList.map(
                        //     (item, index) => {
                        //         return <li key={index} style={
       {color: "blue"}}>{item}</li>
                        //     }
                        // )
    
                        // es6 写法
                        personList.map((item, index) => (<li key={index} style={
       {color: "blue"}}>{item}</li>))
                    }
                </ul>
            </>
        );
        // 找到容器,将虚拟 dom 渲染到页面中
        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(vdom);
    </script>
    </body>
    </html>