腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >更新动态创建的组件

问更新动态创建的组件
EN

Stack Overflow用户

提问于 2018-04-16 09:10:02

回答 2查看 3.4K关注 0票数 1

情况

我有一个父组件，它呈现一些子组件。子组件应显示从父组件传递的信息。

上下文

玩多人游戏的战舰游戏：

父组件包含多达10x30个按钮(子组件)的10x10字段。如果按下按钮，就会发出带有按钮位置的信号到api。api决定按下的按钮是否需要改变它的颜色。

问题

通过更新父组件的状态，如果子组件是动态创建的，子组件道具将不会被更新。

解决尝试

不要动态地呈现Childs：

在我的情况下不可能

使用剩馀

我认为子组件是转储/表示组件，因为它只显示信息。在我的例子中也有100到300个子组件。残馀和反应

参考文献

有100到300个子组件.不要过度使用参考文献

问题

我该怎么办？有没有一种不是反模式的解决方案？

当前代码

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      foo: 'BAR'
    }
    this.child=undefined;
  }
  
  componentWillMount(){
    this.child=<Child foo={this.state.foo}/>
  }  
  
  componentDidMount(){
    var that=this
    setTimeout(function(){ 
      that.setState({  //it is just here for demonstration
        foo: 'FOO'
      }) 
    }, 1000);
  }
  
  render() {
    return (
      <div>
       Is: {this.child}
       Not Dynamic created: <Child foo={this.state.foo}/>
       Actual: <p>{this.state.foo}</p>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <p>{this.props.foo}</p>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

使用来自@RaghavGarg和@Clinton Blackburn的方法编写的代码

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      foo: 'BAR'
    }
    this.child=undefined;
  }
  
  componentDidMount(){
    var that=this
    setTimeout(function(){ 
      that.setState({  //it is just here for demonstration
        foo: 'FOO'
      }) 
    }, 1000);
  }
  
  renderChild(){
    return <Child foo={this.state.foo} />
  }
  
  render() {
    const child=this.renderChild()
    return (
      <div>
       Is: {child}
       Not Dynamic created: <Child foo={this.state.foo}/>
       Actual: <p>{this.state.foo}</p>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <p>{this.props.foo}</p>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>

javascript

reactjs

redux

react-redux

腾讯云OCR文字识别特惠

文字识别限时抢购，热门产品低至14.9元

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-16 13:00:02

就像克林顿说的，componentWillMount只会被打一次电话。因此，您实际上是在启动this.child变量，但只更新状态，您还需要更新变量的值。

因为您只是制作动态组件并将它们保存在类实例中(如this.child)。我建议您在componentWillUpdate中执行同样的任务。因此，每当您的状态发生变化时，它将反映在您的因变量中。但是，请确保在这个生命周期方法中不要使用setState。

当接收到新的道具或状态时，将在呈现之前调用componentWillUpdate()。将此作为在更新发生之前执行准备的机会。

另外，考虑使用构造函数来启动状态，而不是在setState中使用componentWillMount。

componentWillMount()是在挂载发生之前调用的。在render()之前调用它，因此在此方法中同步调用setState()不会触发额外的呈现。通常，我们建议使用constructor()来初始化状态。

参考：

组件更新组件

添加上下文后进行更新

因此，现在，我假设您将有一个DS(可能是一个对象或嵌套数组)处于维护每个框(子组件)状态的状态。您可以对其进行循环，并为其中的每个成员提供一个惟一的key(可能类似于{row}-{col})，现在只需更新状态，以反映特定子节点的变化。

注意：使用每个子项的唯一键将启用内部响应，优化重呈现，并且不会重新呈现子元素(使用唯一的键)，这是不会更改的。参见下面的代码以供参考。

this.state = {
  boxes: {
    1: { 
      1:{ status: true, /* more data */ },
      2:{ status: true, /* more data */ },
    },
    2: { 
      1:{ status: true, /* more data */ },
      2:{ status: true, /* more data */ },
    },
    3: { 
      1:{ status: true, /* more data */ },
      2:{ status: true, /* more data */ },
    },
    4: { 
      1:{ status: true, /* more data */ },
      2:{ status: true, /* more data */ },
    }
  }
};

// this will create a 4x2 box, now you will render using above object

// ...somewhere in your render method
{
  Object.keys(this.state.boxes).map(row => (
    <div key={`row-${row}`} className="row">
      {
        Object.keys(this.state.boxes[row]).map(column => (
          <Child 
            key={`box-${row}x${column}`} 
            data={this.state.boxes[row][column]} 
          />
        ))
      }
    </div>
  ))
}