标签:one his efault demo lis exp 调用 map 私有
当一个组件中有循环的时候,一般情况下都会把循环部分拆分出去作为子组件,形成单个文件,这样为了修改方便。
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 >
)
}
ReactDOM.render(<CmList aaa={DataList} />, document.getElementById(‘demo1‘))
标签:one his efault demo lis exp 调用 map 私有
原文地址:https://www.cnblogs.com/zqblog1314/p/12924647.html