реагировать - заставлять componentDidUpdate (), когда реквизиты имеют одинаковое значение - PullRequest
0 голосов
/ 02 ноября 2018

В моем компоненте я пытаюсь синхронизировать полученные реквизиты с текущим состоянием, чтобы сделать его видимым извне (я знаю, что это анти-паттерн, но я пока не нашел другого решения для этого. Я очень открыт для предложений!).

В любом случае, вот что у меня есть:

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() вызывается только в родительском элементе. Кажется, что, поскольку у ребенка нет изменений в свойствах, реакция даже не беспокоит повторного воспроизведения ребенка, что каким-то образом имеет смысл. Но как я могу заставить их пересмотреть в любом случае?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...