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

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this question

**嗨，

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

谢谢

Answer 1

要重新渲染父级，您有几个选项:您可以更改父级的状态(触发更新)，也可以强制触发更新。无论哪种方式，更新都会触发重新渲染。

下面是使用 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 })<在父级状态中切换 bool 值 在 rerenderParentCallback 函数中。