This is the 23rd day of my participation in the August More Text Challenge

Normally, static is handled by function

Dynamic ones are handled with the class class

Assemble the list contents into arrays and place them in the template

JSX objects that assemble data into arrays

Simplest loop rendering

The key value needs to be in each list

An array of rendering

import React from 'react' import ReactDom from 'react-dom' class Welcome extends React.Component { constructor(props) { Super (props) this.state = {list: [{title: 'React event ', content:' event '}, {title: 'React data transfer ', content: }} render() {let listArr = [] for(let I = 0; i < this.state.list.length; i++) { let item = ( <li> <h3>{ this.state.list[i].title }</h3> <p>{ this.state.list[i].content }</p> </li> ) ListArr = this.state.list.map((item, key) => { return ( <li key={ key }> <h3>{ key + 1 + ' - ' + item['title'] }</h3> <p>{ item['content'] }</p> </li> ) }) } Return (< div> <h1> <ul> {listArr} </ul> </div>)}} reactdom.render (<Welcome />, document.getElementById('root'))Copy the code

Component cycle

import React from 'react' import ReactDom from 'react-dom' function ListItem(props) { return ( <li> <h3>{ props.index + 1 + ' - ' + props.data['title'] }</h3> <p>{ props.data['content'] }</p> </li> ) } class Welcome extends React.Component {constructor(props) {super(props) this. State = {list: [{title: 'React ', content:' React '}, {title: 'React ', content:' React ', {title: 'React ', content: }} render() {let listArr = this.state.list.map((item, Key) => {return (<ListItem data={item} key={key} index={key}></ListItem>)}) return (<div> <ul> { listArr } </ul> </div> ) } } ReactDom.render(<Welcome />, document.getElementById('root'))Copy the code

Cycle summary

import React from 'react' import ReactDom from 'react-dom' function ListItem(props) { return ( <li> <h3>{ props.index + 1 + ' - ' + props.data['title'] }</h3> <p>{ props.data['content'] }</p> </li> ) } class ListItem2 extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <li onClick={ (e) => { this.onOpenShowMsg(this.props.index, this.props.data) }}> <h3>{ this.props.index + 1 + ' - ' + this.props.data['title'] }</h3> <p>{ this.props.data['content'] }</p> </li> ) } onOpenShowMsg = (index, data) => { console.log(index + ' - ' + data.title) } } class Welcome extends React.Component { constructor(props) { Super (props) this.state = {list: [{title: 'React event ', content:' event '}, {title: 'React data transfer ', content: 'Data transfer'}, {title: 'class 3 conditional rendering ', content: }} render() {let listArr = this.state.list.map((item, Key) => {return (<ListItem data={item} key={key} index={key}></ListItem>)}) return (<div> <ul> {listArr} </ul> <h1> Second loop </h1> <ul> {this.state.list.map((item, key) => { return ( <div> <ListItem2 data={ item } key={ key } index={ key }></ListItem2> </div> ) }) } </ul> </div> ) } } ReactDom.render(<Welcome />, document.getElementById('root'))Copy the code