Question

**嗨，

当子组件发生任何变化时，如何重新渲染父组件？**

谢谢

Answer 1

在父组件中添加一个函数，只要其中发生任何更改，子组件都会调用该函数，从而更新父组件的状态。然后，由于状态更改，父级将重新提交。转到反应文档以找到更好的示例：）

Answer 2

要重新渲染父级，您有两个选择：可以更改父级的状态（触发更新），也可以强制触发更新。无论哪种方式，更新都会触发重新呈现。

下面是使用this.forceUpdate()函数强制重新渲染父级的演示。

// Example class component
class Child extends React.Component {
  constructor(props) {
      super(props);
      this.onBtnClick = this.onBtnClick.bind(this);
      this.state = {
          value: 0
      };
  }
  
  onBtnClick() {
      this.setState({ value: this.state.value + 1 });
      this.props.rerenderParentCallback();
  }

  render() {
    console.log(`Child rendered.`);
    return (
      <div>
        <span>Im the child with value {this.state.value}</span>
        <button onClick={() => { this.onBtnClick(); }}>Click to increment child</button>
      </div>
    );
  }
}

// Example class component
class Parent extends React.Component {

  constructor(props) {
    super(props);
    this.rerenderParentCallback = this.rerenderParentCallback.bind(this);
  }

  rerenderParentCallback() {
    this.forceUpdate();
  }

  render() {
    console.log(`Parent rendered.`);
    return (
      <div>
        <div>Im the parent</div>
        <Child rerenderParentCallback={this.rerenderParentCallback}/>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Parent/>,
  document.getElementById("react")
);

button {
 margin: 10px;
}

<div id="react"></div>
<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>

此外，您还会看到，如果将this.props.rerenderParentCallback();行注释掉，则只有该孩子会被重新呈现。

如果您不使用forceUpdate（）来重新呈现父级，则可以执行以下操作，就像通过this.setState({ toggleRerender: !this.state.toggleRerender })函数中的rerenderParentCallback切换父级状态的布尔值一样简单。

当子组件发生任何变化时，如何重新渲染父组件？

2 个答案: