如何在 React 生命周期中访问新的 props.value before render 函数

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（或者可能为 transition/interpolation 准备一个值），但是渲染之前的所有阶段都只有以前的值。 谁能告诉我如何在渲染前获取新值？

谢谢

Answer 1

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

componentWillReceiveProps 当一个组件接收到新的 props 时被调用。

从这里您可以使用 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 and, moreover, there are other solutions that don't involve updating the state! Take a look at this react.js blog article, You Probably Don't Need Derived State.

不完全清楚 OP 想要做什么，但在那篇文章中有各种适当的解决方案。就我而言，我想在单击另一个元素时重置弹出窗口 window。您可以使用 the key attribute 执行此操作。它就像魔术一样工作。 :)

如何在 React 生命周期中访问新的 props.value before render 函数

How to access new props.value before render function in React life cycle

reactjs

lifecycle