React 涉及到循环的组件一般处理方法

当一个组件中有循环的时候，一般情况下都会把循环部分拆分出去作为子组件，形成单个文件，这样为了修改方便。

父组件：

import React, { Component } from 'react' import Item from './item'  //引用子组件 class CmDemo extends Component { constructor(props) { super(props) this.state = { cmlist: this.props.aaa } } render() { return ( <div className="all">
                <h1>评论列表</h1>
 { this.state.cmlist.map((v, i) => { // 调用子组件 循环的也是子组件
                        return <Item key={i} data={v} />
 } ) } </div>
 ) } } export default CmDemo

子组件：

import React from 'react'


// 子组件 单独写到一个文件中去 因为只需要输出，不含有私有属性（数据） // 所以使用函数组件较为合适
 export default function Item(props) { return ( <div className='box'>
            <p className="cUser">评论人：{props.data.user}</p>
            <p className="cMsg">评论内容：{props.data.content}</p>
        </div >
 ) }

index.js中调用并传入数据：

ReactDOM.render(<CmList aaa={DataList} />, document.getElementById('demo1'))