道具验证反应/道具类型错误中缺少“参数值”

Question

我的反应应用程序中有两个组件，例如 alpha 和 bravo，我所做的只是将参数从 alpha 传递到 bravo，并在经过一些操作后在 alpha 中使用结果bravo。这是示例代码：

var alpha = React.createClass({
  state = {
    value : 'someValue'
  }
  render(){
    return(){
      <bravo value={this.state.value}/>
    }
  }
});

还有

var bravo = React.createClass({
   state = {
     value : this.props.value
   }
   render(){
     return(){
        <h1>{this.state.value}</h2>
     }
   }
});

它运行得非常好，我得到了所需的结果，但同时我得到了以下错误：

 error  'value' is missing in props validation  react/prop-types

我尝试在这里探索其余的问题，但没有奏效。

Answer 1

经过将近一个小时的努力，我终于弄明白了solution。在这种情况下，在 bravo 类之后添加以下行：

bravo.propTypes = {
   value: React.PropTypes.string
};

所以添加这些行后，组件代码如下：

var bravo = React.createClass({
  state = {
    value : this.props.value
  }
  render(){
    return(){
       <h1>{this.state.value}</h2>
    }
  }
});
bravo.propTypes = {
   value: React.PropTypes.string
};
export default bravo;

Answer 2

根据docs：

使用 React.createClass()，你需要将 propTypes 定义为一个属性 在传递的对象上，并将 getDefaultProps() 作为其上的函数

为bravo 定义proptypes，你应该很高兴。

另一个注意事项-createClass 接受一个对象，因此render、state 和其他键值对必须是使用冒号而不是等号的值的键。 state 和 render 应该是 key: {key: value}，每个都用逗号分隔。喜欢：

var bravo = React.createClass({

   state: {
     value : this.props.value
   },

   render: function(){
     return <h1>{this.state.value}</h2>
   }
});

Answer 3

也许你可以尝试类似的东西

var Alpha = React.createClass({
  state = { value: 'someValue' }
  valueChanger: function() {
    var newVal;
    // change this.state.value and set it to newVal.
    this.setState( {value: newVal} );
  }
  render: function() {
    <Bravo value={this.valueChanger} />
  }
});

这样您就可以将状态保留在顶级组件中。那你就...

var Bravo = React.createClass({
  render: function() {
    <h1>{this.props.value}</h1>
  }
});