从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;

我要实现的是维护子组件内部的编辑状态，并使用回调将子项的最终状态传递给父级，但是我面临的问题是初始状态没有填充从中传递的属性父组件。 我做错了吗？还是有其他需要研究的问题？

Answer 1

使用componentWillReceiveProps（nextProps）并在此处更改状态。

例如

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

这样，当父组件更改将父状态作为属性传递给子级的状态时，就可以更新子状态。

有关更多详细信息，请参阅-componentwillreceiveprops

Answer 2

如果您要使用从父元素接收到的道具来初始化状态，则无需使用componentWillReceiveProps生命周期。 相反，最好的方法是使用对象的constructor函数。 因此，您将获得类似以下内容的信息。

class AnchorPopover extends Component {

    constructor(props) {
        super(props);
        this.state.hyperlinkTitle = props.hyperlinkTitle;
        // Rest of the states.
    }

    render() { // Your code here. }

}

重要提示 ，无需在构造函数上调用this.setState() 。 您可以从React的官方文档Constructors中找到更多信息。