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

Posted 2021-02-18 zqblog1314

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

父组件：

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