«значение параметра Я» отсутствует в проверке реквизита реагировать/проп-типы ошибок

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:

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

Определение proptypes для bravo, и вы должны быть хорошо идти.

Другое примечание: 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> 
    } 
});