美文网首页
react中通过props给子组件传值,为什么当父组件setSt

react中通过props给子组件传值,为什么当父组件setSt

作者: pomelo_西 | 来源:发表于2019-02-28 17:19 被阅读0次

父组件代码

class AssetDetail extends React.Component {
  state={
    asset: {}
  }
  render() {
    return (
      <AssetMarket asset={{...asset}} />
    )
  }
}

当父组件setState变化asset值,就会重新渲染
子组件使用asset里的属性做渲染,直接使用this.props.asset.属性名可以实时刷新

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>
  }
}

这里因为子组件是拿asset里的某个属性做渲染,所以父组件里直接使用

<AssetMarket asset={asset} />

这样只是里面的某个属性的值发生了变化,没有觉得asset发生变化,所以子组件不能重新渲染

所以使用

<AssetMarket asset={{...asset}} />

重新new 一个asset对象

第二种解决方案,将需要实时刷新的值直接传给子组件

<AssetMarket stratifiedBuy={asset.stratified.buy} stratifiedSell={asset.stratified.sell}/>

子组件

this.props.stratifiedBuy

也可以实现实时刷新

相关文章

  • vue2.0 父子组件传值

    父组件传值给子组件 子组件 子组件通过 props 接收值 父组件 父组件通过标签属性传值 子组件传值给父组件 子...

  • react 父子组件传值(兄弟传值)

    react中父子组件传值 父向子: 父组件通过自定义属性向子组件传值,子组件通过this.props.属性名接收子...

  • 复习Vue 组件间通信.md

    1. props/$emit 父组件向子组件传值:父组件通过props向下传递数据给子组件 子组件向父组件传值(通...

  • react组件传值的几种方式

    react 组件传值一、父组件传给子组件父组件通过props传递给子组件; 二、子组件传给父组件父组件通过prop...

  • vue2.0小结

    父组件与子组件之间的通信 父组件传值给子组件,通过props 子组件传值给父组件,通过$emit 如果在父组件想在...

  • vue、react对比

    一、父子通信 1. 父组件通过props向子组件传值 vue:父组件 子组件接收 react:父组件: 子组件: ...

  • Vue3——组件传值 & v-model & 异步组件 & te

    一、父子组件传值 父组件通过props向子组件传值,子组件通过emit触发自定义事件传递新值给父组件。props:...

  • React组件之间的传值

    父组件传值给子组件,是通过属性传值,子组件接收父组件传过来的值,是通过this.props.xxx 注意,当项目复...

  • vue组件通信

    通常父子组件通信都是用props和$emit进行传递,父组件通过props传值给子组件,子组件通过$emit传值给...

  • 2018-09-05

    组件传值问题 父组件给子组件传值应该使用props。子组件要给父组件传值,需要调用父组件传递的方法。props传值...

网友评论

      本文标题:react中通过props给子组件传值,为什么当父组件setSt

      本文链接:https://www.haomeiwen.com/subject/rjiseqtx.html