react 同一页面多次引入同一组件，传参显示

有一个react项目，不同类型的相似内容要显示在一个页面中，而且同一类型还会有多条数据，针对这种情况最好是使用组件传值获取。因为格式相同标题类似，所以可以在父组件向后台拉取内容之后再将内容跟名称传给子组件，动态显示名称跟内容。之所以先在父组件拉取内容是为了减少服务器的压力，如果是在子组件拉取内容的话，10个类型就要请求10次，20个就要请求20次。

---

• 父组件页面：

值得注意的一点是，虽然引入的组件是同一个，但是不同类型使用的组件需要起不同的名称，然后再根据项目需要传值给子组件。

---

• 子组件页面：

重点在于“componentWillReceiveProps”这个函数，在props发生变化的时候可以使用这个函数。如果不使用这个函数，会出现一个异步的操作，而这个函数可以避免这种情况的法生。

componentWillReceiveProps(nextProps) {
    this.setState({
        list: nextProps.commentL
    });
}

---

• 最后在子组件中：

判断list的长度是否为0，为0的话就显示一条空数据，不为0的话就for循环出来。

<BudgetWrapper>
{
    list.length===0?
        <div className="bigBox">
            <div className='oneBox'>
                <p className='title'>{type_name}单位：</p>
	                <Input className='desc' readOnly />
            </div>
            <div className='oneBox'>
                <p className='title'>{type_name}费用：</p>
                    <Input className='desc' readOnly />
            </div>
            <div className='oneBox secondBox'>
			    <p className='title'>已付：</p>
				<Input className='desc' readOnly />
			</div>
			<div className='oneBox thirdBox'>
				<p className='title'>已付比例：</p>
				<Input className='desc' readOnly />
			</div>
			<div className='oneBox'>
				<p className='title'>{type_name}合同：</p>
				<p className='desc'></p>
			</div>
		</div>:
	<Fragment>
	{list.map((item, index) => {
		return (
            <div className="bigBox" key={index}>
				<div className='oneBox'>
					<p className='title'>{type_name}单位：</p>
					<Input className='desc' value={item.unit_name} readOnly />
				</div>
				<div className='oneBox'>
					<p className='title'>{type_name}费用：</p>
					<Input className='desc' value={item.pact_price} readOnly />
				</div>
				<div className='oneBox secondBox'>
					<p className='title'>已付：</p>
					<Input className='desc' value={item.paid_price} readOnly />
				</div>
				<div className='oneBox thirdBox'>
					<p className='title'>已付比例：</p>
				    <Input className='desc' value={item.paid_rate} readOnly />
				</div>
				<div className='oneBox'>
					<p className='title'>{type_name}合同：</p>
					<a className='desc' href={item.pact_file} target="_blank" rel="noreferrer">{item.pact_file_name}</a>
				</div>
			</div>
		)})}
	</Fragment>
	}
</BudgetWrapper>