Initialize компонент состояния от родительских реквизита в reactjs

Question

Мой родительский компонент в React проходит реквизита его AnchorPopover ребенка, как это:

<AnchorPopover 
    bannerHyperlinks={this.state.bannerHyperlinks} 
    hyperlinkTitle ={this.props.hyperLink1Text} 
    hyperlinkHref ={this.props.hyperlink1} 
    hyperlinkStyle ={hyperlink1Style} 
    onDetailsChange ={this.props.onHyperLink1DetailsChange} 
/> 

Это AnchorPopover ребенок выглядит следующим образом:

var AnchorPopover = React.createClass({ 
    propTypes:{ 
    hyperlinkTitle: React.PropTypes.string.isRequired, 
    hyperlinkHref: React.PropTypes.string, 
    hyperlinkStyle: React.PropTypes.object.isRequired, 
    bannerHyperlinks: React.PropTypes.object.isRequired, 
    onDetailsChange: React.PropTypes.func.isRequired 
    }, 

    getInitialState: function() { 
    return { 
     title: this.props.hyperlinkTitle, 
     link: this.props.hyperlinkHref 
    }; 
    }, 

    _onTitleChange: function() { 
    var newTitle = event.target.value; 
    this.setState({ 
     title: newTitle 
    }); 
    }, 

    _onLinkChange: function() { 
    var newLink = event.target.value; 
    this.setState({ 
     link: newLink 
    }); 
    }, 

    _onLinkSelect: function() { 
    var newLink = event.target.value; 
    this.setState({ 
     link: newLink 
    }); 
    }, 

    _onSave: function() { 
    var title = this.state.title; 
    var link = this.state.link; 
    this.props.onDetailsChange(title, link); 
    }, 

    onCancel: function() { 
    var title = this.props.hyperlinkTitle; 
    var link = this.props.hyperlinkHref; 
    this.props.onDetailsChange(title, link); 
    }, 

    render: function() { 
    var optGroups = []; 
    for (var optGroupsHeading in this.props.bannerHyperlinks) { 
     optGroups.push(
     <Optgroup 
      label={optGroupsHeading} 
      group={this.props.bannerHyperlinks[optGroupsHeading]} 
     /> 
    ); 
    } 
    var overlay = (
     <Popover title={this.state.title}> 
     <Input onChange={this._onTitleChange} 
      required type="text" 
      placeholder="Enter Link Title" 
      label="Title" 
      value={this.state.title} 
     /> 
     <Input 
      onChange={this._onLinkChange} 
      required type="text" 
      placeholder="Enter Link Href" 
      label="Href" 
      value={this.state.link} 
     /> 
     <Input type="select" onChange={this._onLinkSelect} defaultValue={this.state.link}> 
      {optGroups} 
     </Input> 
     <Button bsStyle='primary' onClick={this._onSave}>Save</Button> 
     <Button bsStyle='danger' onClick={this._onCancel}>Cancel</Button> 
     </Popover> 
    ); 

    return (
     <OverlayTrigger trigger="click" placement='left' overlay={overlay}> 
     <a style={this.props.hyperlinkStyle} target="_blank" className="banner_hyperlink" href='javascript:void 0;'> 
      {this.props.hyperlinkTitle} 
     </a> 
     </OverlayTrigger> 
    ); 
    } 
}); 

module.exports = AnchorPopover; 

То, что я хочу для достижения является сохранение состояния редактирования внутри дочернего компонента и передача конечного состояния дочернего элемента родительскому с помощью обратного вызова, но проблема, с которой я сталкиваюсь, заключается в том, что начальное состояние не заполняется свойствами, передаваемыми из родительского компонента onent. Я делаю это неправильно или есть какая-то другая проблема, которую мне нужно изучить?

Answer 1

Используйте компонентWillReceiveProps (nextProps) и измените состояние здесь.

Например

componentWillReceiveProps(nextProps){ 
    this.setState({ statename : newstatevalue here..... }) 
} 

Таким образом, состояние ребенка может быть обновлена, когда-либо родительский компонент изменяет состояние, в котором родительское состояние передается как свойство к ребенку.

Для получения более подробной информации, Вы можете обратиться - componentwillreceiveprops