Today, use React to complete a small case. Use react to render data to the page. The effect is as follows.
First, if you want to use react to traverse the object, then we have to introduce the relevant plug-in of react and introduce us to the data of the page. js data is also introduced. The data file is in the share, you can download it.
<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>
After all preparations are made, we can start working.
- We use functional components to first render what we need to render on the page, first take the App as an example, try to see if it succeeds.
<body>
<div id="box"></div>
<script type="text/babel">
const App = () => {
return (
<div>
App
</div>
)
}
ReactDOM.render(<App/>, document.getElementById("box"))
</script>
</body>
Running the above code will find that we have successfully rendered the App to the page. Now that it is successful, it means that our thinking is correct, and then we will continue to write code.
- Now that the App font has been successfully rendered on the page, we will replace the App font with the font we want to render.
<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>
In this way, we display the words of the friend list we need
- The next step is to traverse the objects we render to successfully render the data we need.
<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>
So that we can render the data we need
- But if you observe carefully, you will find that we have not rendered the red data. If you observe carefully, you will find that there is a vip attribute in the data file that we need to render. Below we use the vip attribute to color the data that needs to be red.
In fact, it is very simple. We only need to make a judgment for the message data to determine whether its vip attribute is true. If it is true, it will be rendered in red, and if it is false, it will be empty. as follows:
<span style={{color:item.vip?'red':''}}>{item.message}</span>
In this way, we have completely rendered the required effect!
