Question

所有

如果我定义一个组件有一个名为“value”的属性，

var Child = React.createClass({
  componentWillReceiveProps: function(){
     console.log("componentWillReceiveProps",this.props.value);
  },
  shouldComponentUpdate : function(){
    console.log("shouldComponentUpdate", this.props.value);
    return true;
  },
  componentWillUpdate : function(){
    console.log("componentWillUpdate", this.props.value);
  },
  componentDidUpdate: function(){
    console.log("componentDidUpdate", this.props.value);
  },
  render: function(){
    return (
      <div>The value generated by Parent: {this.props.value}</div>
    );
  }
});

如果我想将新设置的props.value赋予state.value（或者可能为转换/插值准备一个值），但渲染之前的所有阶段只有前一个值。 有人可以告诉我如何在渲染之前获取新值吗？

由于

Answer 1

重要提示：componentWillReceiveProps已被弃用：https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

当组件收到新道具时，会调用

componentWillReceiveProps。

从这里，您可以使用setState更新组件的状态，而不会触发渲染。

您可以从传递给的第一个参数访问新的道具 componentWillReceiveProps
您可以访问旧道具this.props

从你的例子：

componentWillReceiveProps: function(nextProps){
    console.log("componentWillReceiveProps", nextProps.value, this.props.value);
},

JSBin demo

Answer 2

对于任何通过Google找到这个老问题的人来说，它已经过时了。 You shouldn't be using this function anymore，此外，还有其他解决方案不涉及更新状态！看一下这篇react.js博客文章You Probably Don't Need Derived State。

尚不清楚OP想要做什么，但是该文章中有各种适当的解决方案。就我而言，我想在单击其他元素时重置弹出窗口。您可以使用the key attribute进行此操作。它像魔术一样工作。：）

如何在React生命周期中的渲染函数之前访问新的props.value

2 个答案: