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，因为你的Slide1s是第一次在那里渲染，它们被安装到DOM上，但componentWillReceiveProps只能被调用已经挂载组件，请参阅documentation。

ReactJS componentWillReceiveProps不会触发

1 个答案: