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