react-列表渲染

最新推荐文章于 2024-07-24 15:55:29 发布

杨不旧

最新推荐文章于 2024-07-24 15:55:29 发布

阅读量188

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/qq_45152044/article/details/124261198

版权

react 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <!-- react的容器 -->
    <div id="app"></div>
</body>

</html>
<script type="text/babel">
    class ComClass extends React.Component {
        constructor() {
            super();
            this.state = {
                arr: ['apple', 'banana', 'cat']
            }
        }
        render() {
            //第一种写法
            /*
            let arr = [];//得到的结果为['<li>apple</li>','<li>banana</li>','<li>cat</li>']
            this.state.arr.forEach((v) => {
                arr.push(<li>{v}</li>)
            })
            */
            //第二种写法

            let arr = this.state.arr.map(v => <li>{v}</li>)
            return (
                <div>
                    <ol>
                        <p>处理过程丢在外面</p>
                        {arr}
                        <p>处理过程直接丢在里面</p>
                        {this.state.arr.map((v, i) => <li key={i}>{v}</li>)}
                    </ol>
                </div>
            )

        }
    }
    //不同的条件去return不同东西，达到渲染不同的东西，这就是条件渲染
    ReactDOM.render(<ComClass />, document.querySelector("#app"));
</script>

杨不旧

关注

0
点赞
踩
0

收藏

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

代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫