'Paramter value' 道具验证中缺少 react/prop-types 错误

Question

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

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

我尝试探索这里的其余问题，但 none 奏效了。

Answer 1

根据docs：

With React.createClass(), you need to define propTypes as a property on the passed object, and getDefaultProps() as a function on it

为 bravo 定义 proptypes，您应该可以开始了。

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

var bravo = React.createClass({

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

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

Answer 2

也许你可以试试

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>
  }
});

Answer 3

经过将近一个小时的奋斗，我终于想通了solution。在这种情况下，在 bravo class 之后添加以下行有效：

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;

'Paramter value' 道具验证中缺少 react/prop-types 错误

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

javascript

components

ecmascript-6

reactjs

eslint