父組件代碼
class AssetDetail extends React.Component {
state={
asset: {}
}
render() {
return (
<AssetMarket asset={{...asset}} />
)
}
}
當(dāng)父組件setState變化asset值仪媒，就會(huì)重新渲染
子組件使用asset里的屬性做渲染狸眼，直接使用this.props.asset.屬性名可以實(shí)時(shí)刷新
class AssetMarket extends Component {
render() {
<div className='stratified'>
{
this.props.asset.stratified.buy.map((item, index) =>
<Row key={index} className='stratified-item'>
<Col span={10} className='item-price text-right is-green'>{item.price}</Col>
<Col span={8} title={item.number} style={{overflow: 'hidden', textOverflow: 'ellipsis'}} className='item-number text-center'>
{item.number % 1000000 === 0 ? parseFloat(item.number / 1000000) : parseFloat(item.number / 1000000).toFixed(3)}
</Col>
</Row>
)
}
</div>
}
}
這里因?yàn)樽咏M件是拿asset里的某個(gè)屬性做渲染藤树，所以父組件里直接使用
<AssetMarket asset={asset} />
這樣只是里面的某個(gè)屬性的值發(fā)生了變化，沒有覺得asset發(fā)生變化份企，所以子組件不能重新渲染
所以使用
<AssetMarket asset={{...asset}} />
重新new 一個(gè)asset對(duì)象
第二種解決方案也榄，將需要實(shí)時(shí)刷新的值直接傳給子組件
<AssetMarket stratifiedBuy={asset.stratified.buy} stratifiedSell={asset.stratified.sell}/>
子組件
this.props.stratifiedBuy
也可以實(shí)現(xiàn)實(shí)時(shí)刷新
