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'))