ReactJS componentWillReceiveProps 未触发

Question

我正在实现https://github.com/akiran/react-slick 的滑块

我有自定义子组件需要在父组件更新时更新其状态。当我正常加载幻灯片时，例如：

<Slider ref={c => this.slider = c } {...settings}>
  <div key={1}>
    <Slide1 key={1} formData={this.state.formData} />
  </div>
  ...
</Slider>

componentWillReceiveProps 工作正常。但是，当我根据示例 here 动态加载幻灯片时，这些生命周期事件永远不会被调用，即使在父级中更新了状态之后也是如此。

componentDidMount() {
    this.setState({
        slides: [
            <div key={1}>
                <Slide1 key={1} formData={this.state.formData} />
            </div>,
            ....
        ]
    )};
}


<Slider ref={c => this.slider = c } {...settings}>
  {this.state.slides.map(function (slide, i) {
    return slide
  })}
</Slide>

通过像这样加载组件，componentWillReceiveProps 永远不会被调用，即使在状态更新后也是如此。

我错过了什么？我不需要 Redux 来管理它吗？

Answer 1

首先，尝试在状态中存储实际的 React 元素是一个非常糟糕的主意，你应该只存储纯数据，然后在 render 方法中使用这些数据来组成标记。

其次，componentWillReceiveProps 在您的情况下没有被调用，因为您的 Slide1 是第一次在那里渲染，它们被安装到 DOM 上，但 componentWillReceiveProps 只能为已安装的组件调用，请参阅@ 987654321@.