列表渲染

最新推荐文章于 2024-05-19 18:20:50 发布

Leon_Jinhai_Sun

最新推荐文章于 2024-05-19 18:20:50 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/103484708

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
</head>
<body>
<div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
    const fruits = [
        <li key="1">苹果</li>,
        <li key="2">香蕉</li>,
        <li key="3">橘子</li>
    ]

    const todos = [
        {
            id: 1,
            title: '吃饭'
        },
        {
            id: 2,
            title: 'sleep'
        },
        {
            id: 3,
            title: '大'
        }
    ];

    // const todoLis = []
    // todos.forEach(item => {
    //   todoLis.push(<li key={item.id}>{item.title}</li>)
    // })

    const todoLis = todos.map(item => {
        return <li key={item.id}>{item.title}</li>
    });



    const element = (
        <div>
            {/* 在 jsx 中，绑定数组成员会直接把成员渲染到这里 */}
            <ul>{fruits}</ul>
            <ul>
                {/* 直接绑定一个数据 */}
                {todoLis}
            </ul>
                { /* 直接在标签中动态生成一个数组 */ }
            <hr/>
            <ul>
                {
                    todos.map(item => {
                        return <li key={item.id}>{item.title}</li>
                    })
                }
            </ul>
        </div>
    );

    ReactDOM.render(element, document.getElementById('app'));
</script>
</body>
</html>

Leon_Jinhai_Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表渲染

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表渲染</title></head><body><div id="app"></div><script s...
复制链接

扫一扫