使用 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>

这样，我们就把所需要的效果完整的渲染出来了！

使用 React 遍历对象相关推荐

react遍历对象的值_React 原理之实现 createElement 和 render 方法
前言在 React 中,我们都知道可以写 jsx 代码会被编译成真正的 DOM 插入到要显示的页面上.这具体是怎么实现的,今天我们就自己动手做一下. 实现 createElement 方法这个方法 ...
react 遍历对象_React 和 Vue 之间的相爱相杀
React 和 Vue 应该是国内当下最火热的前端框架,当然 Angular 也是一个不错的框架,但是这个产品国内使用的人很少再加上我对 Angular 也不怎么熟悉,所以就不在这篇文章中做对比了. ...
react 遍历对象_探索：跟随《Build your own React》实现一个简易React
文章介绍 build-your-own-react是一篇操作说明书,指导用户一步步实现一个简易的React,从中了解到React的大体工作流程.这篇文章是我的观后整理和记录,或许对大家会有所帮助. 构 ...
react 遍历对象_React 源码系列 | React Children 详解
本文基于 React V16.8.6,本文代码地址测试代码源码讲解 React 中一个元素可能有 0 个.1 个或者多个直接子元素,React 导出的 Children 中包含 5 个处理子元素的 ...
十、children的深入用法-React.Children对象上的方法
目标理解什么是children 掌握React.Children对象上的方法知识点什么是children 上图中我们看到了,我们之前学过的React.createElement方法,现在大家发现 ...
OC中创建对象，存入数组，并且遍历对象
在这个地方我们将通过一个例子来演示怎样来创建一个对象,创建数组,怎样将数组中的对象的属性都输出来. 首先为了完成这样的一个目标我们需要做的是创建一个对象: #import <Foundation ...
javascript 遍历对象
javascript 遍历对象 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
v-for遍历数组 || v-for遍历对象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
分支结构||分支循环结构||使用原生js遍历对象
分支循环结构分支结构 v-show的原理:控制元素样式是否显示 display:none <!DOCTYPE html> <html lang="en"> ...

使用 React 遍历对象

使用 React 遍历对象相关推荐

最新文章

热门文章