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）并在此处更改状态。

例如

export default config => {
  config.output.library = 'myLibName';
  config.output.libraryTarget = 'umd';
}

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

有关详细信息，请参阅 - 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中找到更多信息。

从reactjs中的父道具初始化组件状态

2 个答案: