Question

我有一个拥有ModalComponent的父级：

render(){
return (
  <MyCustomModal
    visible={this.state.displayModal}
    //various properties
  />
);
}

MyCustomModal有州，比如MyCustomModal.myState。当我单击“保存/取消”时，我希望MyCustommodal.myState重置为空。目前我有一个处理这个问题的功能：

export function clearFields(){
  //called by onCancel to setState to null
}

我发现这个clearFields（）很难管理。我可以自行重置孩子的状态吗？我不必自己管理这个州吗？

换句话说，是否有某种方法可以挂钩组件生命周期并告诉它卸载......或类似的东西？

Answer 1

您可以决定是否必须在父组件呈现方法中装入或卸载子组件。每当调用render方法时，都会创建一个虚拟DOM，然后与该组件的实际现有虚拟DOM（如果存在）进行比较，如果发现任何更改，它们将被应用为适当的（挂载或卸载子元素）或改变其道具等）。

因此，您可以决定在渲染方法中渲染具有条件的子项。如果孩子已经安装并且必须卸载，则会调用其“componentWillUnmount”方法，您可以在那里执行所需的任何清理代码。

查看示例的下一个代码块（或此jsfiddle）

var World = React.createClass({
  componentWillUnmount: function() {
    alert('This component is unmounting');
  },
  render: function() {
    return ( < span > World! < /span>);
    },
  });

var Hello = React.createClass({
  _handleClick: function() {
    this.setState({
      showChild: false
    });
  },
  getInitialState: function() {
    return {
      showChild: true,
    };
  },
  render: function() {
    var childNode = null;
    if (this.state.showChild)
      childNode = ( < World / > );
    return <div > Hello {
      childNode
    } < button onClick = {
      this._handleClick
    } > Click < /button></div > ;
  }
});

ReactDOM.render( < Hello / > ,
  document.getElementById('container')
);

告诉组件在关闭时破坏状态

1 个答案: