使用 React 遍历对象

今天使用React完成一个小案例，使用react把数据渲染到页面，效果如下
在这里插入图片描述
首先，既然要是要使用react遍历对象吗，那我们就得引入react的相关插件引入，并且把我们要渲染到页面的data.js数据也引进来。data文件在分享里面有，可以去下载。

   <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>
    <script src="/data.js"></script>

做好全部准备之后，我们就可以开干了。

我们使用函数式组件先把我们需要渲染的东西渲染到页面上，先拿App做例子，试试能不能成功。

<body>
    <div id="box"></div>
    <script type="text/babel">
        const App = () => {
            return (
                <div>
                    App
                </div>
            )
        }
        ReactDOM.render(<App/>, document.getElementById("box"))
    </script>
</body>

把上面的代码运行起来会发现，我们已经成功的把App渲染到页面上。既然成功了，就说明我们的思路是对的，接下来我们接着往下写代码。

既然App字样已经成功的渲染到页面上去了，那我们就把App字样换成我们想渲染的字样上去。

 <script type="text/babel">

        const List = props =>{
            return (
                <ul>
                    <li>九华彩</li>
                </ul>
            )
        }

        const Group = props=>{
            return (
                <div>
                    <h3>好友</h3>
                    <List/>    
                </div>
            )
        }

        const App = () => {
            return (
                <div>
                    <Group />
                </div>
            )
        }
        ReactDOM.render(<App/>, document.getElementById("box"))
    </script>

这样我们就把我们需要的好友例表的字样显示出来了
在这里插入图片描述

接下来就是把我们所渲染的对象遍历出来就可以成功的把我们所需要的数据渲染出来了

 <script type="text/babel">

        const List = props => {
            return (
                <ul>
                    {
                        props.list.map((item, index) => {
                            return <li key={index}>
                                <span>{item.username}</span>
                                <span>{item.message}</span>
                            </li>
                        })
                    }
                </ul>
            )
        }

        const Group = props => {
            return (
                <div>
                    <h3>{props.name}</h3>
                    <List list={props.list}/>
                </div>
            )
        }

        const App = () => {
            return (
                <div>
                    {
                        Object.keys(dataList).map((item, index) => {
                            return <Group keys={index} name={dataList[item].name} list={dataList[item].list}/>
                        })
                    }
                </div>
            )
        }
        ReactDOM.render(<App />, document.getElementById("box"))
    </script>

这样就可以把我们所需要的数据渲染出来了
在这里插入图片描述

但是如果你认真观察，你会发现我们还没有把变红的数据渲染出来，仔细观察会发现，在我们需要渲染的data文件里面还有一个vip属性没有用上。下面我们使用vip属性把需要染红的数据染红。

其实很简单，我们只需要给message数据做一个判断，判断它的vip属性是否为真，如果为真就渲染成红色，如果为假就为空就行了。如下：

  <span style={{color:item.vip?'red':''}}>{item.message}</span>

这样，我们就把所需要的效果完整的渲染出来了！
在这里插入图片描述

别来…无恙

发布了31 篇原创文章 · 获赞 4 · 访问量 993

私信关注

使用 React 遍历对象

猜你喜欢