Question

我想使用来自我的道具的数据来播种我的组件状态，例如：https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

getInitialState: function() {
    return {count: this.props.initialCount};
},

看看它附近的底部说“但是，如果你明确说道，支柱只是组件内部控制状态的种子数据，那么它不是反模式：”这正是我想要做的。 / p>

这在使用React.createClass时效果很好，但是如果可能的话我想使用ES6类来做这件事。但是在使用ES6类时，初始状态作为类的静态属性提供。如果您尝试实现getInitialState（），您将收到错误。这意味着在道具可用后我没有机会计算它。请参阅https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#es7-property-initializers

上标题为“ES7 +属性初始值设定项”的部分

在该部分中，它们提供了一个示例，其中初始状态的计算类似于旧的getInitialState方法，只需在构造函数中设置this.state即可。但是，当我尝试这个时，this.props还没有设置。

我已经搜索了第一次设置道具的生命周期方法，这样我就可以设置当时的状态，但我找不到任何这样的生命周期方法。

我必须使用React.createClass，或者在使用扩展React.Component的ES6类时有没有办法播种我的initialState？

Answer 1

事实证明我在构造函数中没有将参数传递给super，这就是为什么道具在构造函数中不可用。我只需要改变这个：

constructor() {
  super()
  ...
}

进入这个：

constructor(...args) {
  super(...args)
  ...
}

我的问题与How to assign a prop value to a state in react非常相似，这让我误解了，所以这可能被视为重复。

Answer 2

这是一个示例课，您可以在其中使用

class Sample extends React.Component {
  constructor(props, context) {
    super(props, context);

    // replacement for componentWillMount
    this.state = {
      stateKey: props.stateVal
    };
  }

  render() {
    return (
      <div>{this.state.stateKey}</div>
    );
  }
}

Answer 3

  class Sample extends React.Component {
    constructor(props, context) {
        super(props, context);
         this.state = {
               stateKey: ''
          };
       }

       componentWillReceiveProps(){
        this.setState({
           stateKey:this.props.data
         })

       render() {
          return (
           <div>{this.state.stateKey}</div>
       );
    }

}

在不使用React.createClass

3 个答案: