如何对子组件进行React forceUpdate()？

Question

我可以 重装上阵 的父级组件，具有 this.forceUpdate()但如何为一个子组件做？

即下面的react类方法。

buttonClick = () => {
   //This updates parent (this) component
   this.forceUpdate(); 

  //This causes runtime error ("..not a function in buttonClick...")
   Rtable.forceUpdate();
}

render () {
  <div>
     <RTable />
  </div>
}

Answer 1

如果子组件 不记 然后使其父级 将使 的子组件。

如果子组件 记忆犹新，你可以用它来强制更新 参考.

当然，将不同的属性传递给子代，改变它的状态，也会重新渲染。

改变 钥匙 会 UNMOUNT 的组件，这就像做一个 条件渲染 上。

下面是一个例子，证明了上述的一切。

class Child extends React.Component {
  componentDidMount() {
    console.log("mounted");
  }
  render() {
    console.log("rendered");
    return <div>Child</div>;
  }
}

class App extends React.Component {
  state = {
    counter: 0
  };

  childRef = React.createRef();
  onClick = () => this.forceUpdate();
  onCounter = () => this.setState({ counter: this.state.counter + 1 });
  onRef = () => this.childRef.current.forceUpdate();

  render() {
    return (
      <>
        <Child key={this.state.counter} ref={this.childRef} />
        <button onClick={this.onClick}>Render</button>
        <button onClick={this.onCounter}>Update Key</button>
        <button onClick={this.onRef}>Render with ref</button>
      </>
    );
  }
}

Answer 2

<RTable key={some variable that changes between renders} />

正如下面所指出的，这将导致unmount，这将导致孩子失去状态，并运行 componentWillUnmount, componentDidMount 和 constructor 方法（当你想重新订阅时可能会有用）。

文档 https:/reactjs.orgdocsglossary.html#keys