Question

在我的组件中，我试图将接收到的道具与当前状态进行同步，以使其从外部可见（我知道这是一种反模式，但是我还没有找到其他解决方案。开放征求意见！）。

无论如何，这就是我所拥有的：

export class PopupContainer extends React.Component {
  state = {
    show: false,
  };

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.show === nextProps.show) return true;
    return true;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // if popup shown, fade it out in 500ms
    if (this.props.show !== prevProps.show)
      this.setState({ show: this.props.show });

    if (this.state.show) {
      setTimeout(() => this.setState({ show: false }), 2000);
    }
  }

  render() {
    return <Popup {...{ ...this.props, show: this.state.show }} />;
  }
}

在我的外部组件中，我正在渲染容器：

<PopupContainer
          show={this.state.popup.show}
          message={this.state.popup.message}
          level={this.state.popup.level}
        />

现在，当我最初将this.state.show设置为true时，它可以工作，但是每个连续的分配（也就是true，中间没有任何false分配）不起作用。即使道具的价值相同，我怎么也要强制componentdidUpdate()开火？ shouldComponentUpdate()似乎无法解决问题。

谢谢！

编辑：我注意到render()方法仅在父元素中调用。看起来好像孩子的属性没有变化，React甚至不费心重新渲染孩子，这在某种程度上是有道理的。但是我怎么能强迫他们重新渲染呢？

Answer 1

这是一种hack，但是对我有用。

在子班级

在构造函数中为状态添加一个属性-我们将其称为myChildTrigger，并将其设置为空字符串：

this.state = {
   ...
   myChildTrigger: ''
}

然后将其添加到componentDidUpdate：

componentDidUpdate(prevProps) {
   if(this.state.myChildTrigger !== this.props.myParentTrigger) {

      // Do what you want here

      this.setState({myChildTrigger: this.props.myParentTrigger});
   }
}

在父班级

添加一个myParentTrigger以在构造函数中声明：

this.state = {
   ...
   myParentTrigger: ''
}

在render方法中，将其添加为道具，如下所示：

<ChildClass ... myParentTrigger={this.state.myParentTrigger} />

现在，您只需将componentDidUpdate设置为新值即可触发对myParentTrigger的调用以执行if语句中的内容，例如：

this.setState({ myParentTrigger: this.state.myParentTrigger + 'a' });

reacts-当props是相同的值时强制componentDidUpdate（）

1 个答案: