Reactjs 为什么不调用componentWillReceiveProps？

在child，我需要监听在parent更改的状态，我尝试这样做：

儿童

class deleteDriverAlert extends Component {

    constructor(props) {
        super(props);

        this.state = {
          show: false
        };
      }

      componentWillReceiveProps(nextProps) {
        console.log("componentWillReceiveProps . . . . .");
        this.setState({ show: nextProps.dataset.showDeleteAll });  
      }

    render() {

        return (
            <SweetAlert
            warning
            showCancel
            confirmBtnText="Yes, delete it!"
            confirmBtnBsStyle="danger"
            cancelBtnBsStyle="default"
            title="Are you sure?"

            onConfirm={this.props.dataset.onConfirm}
            onCancel={this.props.dataset.onCancel}
            show={this.state.show}
            >
            You will not be able to recover this imaginary file!
            </SweetAlert>
        );
    }
}

export default deleteDriverAlert;

类deleteDriverAlert扩展组件{
建造师（道具）{
超级（道具）；
此.state={
节目：假
};
}
组件将接收道具（下一步）{
log（“componentWillReceiveProps…”）；
this.setState（{show:nextrops.dataset.showDeleteAll}）；
}
render（）{
返回(
您将无法恢复此虚拟文件！
);
}
}
导出默认的deleteDriverErt；

然后，在父级中，我将子级添加为：

<deleteDriverAlert data-showDeleteAll={this.state.show_delete_all} data-onConfirm={this.deleteDriver} data-onCancel={this.onCancelDelete} />

---

现在，尽管我确实在父级更改了属性状态

show\u delete\u all

，但在子级不会调用

componentWillReceiveProps

---

有什么想法吗？

我可能错了，但我认为当父组件更改状态时，react不会重新呈现子组件，这是有意义的，因为状态是特定于该组件的本地事物。但是，由于您没有使用状态管理库，因此在这个场景中使用新的React上下文API更有意义，可以将更改的数据传递给子组件，而且看起来非常简单

---

首先，您不需要将道具设置为子组件的状态，以便能够动态使用它们。问题很可能与您更改父级中状态的方式有关

下面是一个简单的例子，说明您正在尝试做的事情：

父组件有它自己的状态和更改它的方法，该方法绑定到父上下文并用按钮翻转。然后将状态作为道具传递给孩子：

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {

  constructor(props) {
    super(props);
    this.state = { show: false };
    this.flipShow = this.flipShow.bind(this);
  }

  flipShow(){
    this.setState({show: !this.state.show})
  }

  render() {
    return (
      <div>
        <p>Parent</p>
        <button onClick={this.flipShow}>Show</button>
        <Child show={this.state.show} />
      </div>
    );
  }
}

export default Parent;

import React，{Component}来自'React'；
从“./Child”导入子项；
类父级扩展组件{
建造师（道具）{
超级（道具）；
this.state={show:false}；
this.flipShow=this.flipShow.bind（this）；
}
flipShow（）{
this.setState（{show:！this.state.show}）
}
render（）{
返回(
母公司

显示
);
}
}
导出默认父对象；

然后，孩子简单地将道具穿过。注意：在下面的示例中，组件WillReceiveProps是不必要的，但我只是把它放在那里，以表明它确实使用此设置

import React, { Component } from 'react';
import SweetAlert from './SweetAlert';

class Child extends Component {
  componentWillReceiveProps(nextProps){
    console.log("receiving new props");
  }
  render() {
    return (
      <SweetAlert
        show={this.props.show}
      />
    );
  }
}

export default Child;

import React，{Component}来自'React'；
从“/SweetAlert”导入SweetAlert；
类子扩展组件{
组件将接收道具（下一步）{
控制台日志（“接收新道具”）；
}
render（）{
返回(
);
}
}
导出默认子对象；

TL；博士

---

如果componentWillReceiveProps没有启动，则是父组件和设置道具值的方式（而不是子组件）有问题。

尽量不要使用

数据集

，而只是命名您的道具

showDeleteAll

，

onConfirm

和

onCancel

同样，它不适用于布尔显示，未调用调用已工作的调用方法

componentWillReceiveProps

，因为其属性未更改。。。MaThanks，我正在尝试将我的reactjs升级到最新版本，但我有问题