Javascript 单击React渲染其他组件。ReactJS中的最优模式

新的反应，享受它迄今为止

我遇到的情况是，家长同时呈现以下两种情况：

TagBuilderContainer（最初包含1个TagBuilderComponent的数据层）

带有onClick事件的“添加标记”按钮（用于在每次单击时在TagBuilderContainer中添加新的TagBuilderComponent）

想知道在用户会话期间添加任意数量的特定组件是否有首选/最佳模式

一些示例代码

var TagBuilderParent = React.createClass({

  _newTagSelected() {
   //code to be added. something to handle event and drive new component creation
  },

  render() {
    return (
      <div className="well">
        <TagBuilderContainer
          templateContext={this.props.templateContext} />
        <button onClick={this._newTagSelected} className="btn btn-sm"><i className="fa fa-tag"></i> Add Tag</button>
      </div>
    );
  }
});

var TagBuilderContainer = React.createClass({

  componentWillMount() {
    let _this = this;
    collectedInstanceTags = new ReactiveVar([]);
    Meteor.call('getAllMatchingTagsFromCollection', this.props.templateContext.data.selectedAccount, function(err, res) {
      if (err) {
        console.log('error', err);
      } else {
        console.log('setting reactive variable');
        collectedInstanceTags.set(res);
      }
    });

    this.setState({collectedInstanceTags: collectedInstanceTags});
  },

  componentDidMount() {},

  render() {
    return (
      <div className='tagGroup' ref='tagGroup'>
        <TagBuilder
          collectedInstanceTags={this.state.collectedInstanceTags.get()} />
      </div>
    );
  }
});

var TagBuilder = React.createClass({

  getInitialState() {
    return {
      userSelectedKey: '',
      userSelectedValue: ''
    };
  },

  componentDidMount() {},

  _populateTagKeyOptions(tag, index) {
    return (
      <option value={tag.Key} key={index}>{tag.Key}</option>
    );
  },

  _setUserSelectedTag(event) {
    this.setState({userSelectedKey: event.target.value});
  },

  _populateTagValueOptions(tag, index) {
    let matchingTagValue;
    if (this.state.userSelectedKey === tag.Key) {
      matchingTagValue = <option value={tag.Value} key={index}><div>{tag.Value}</div></option>;
    }

    return (
      matchingTagValue
    );
  },

  render() {
    let tagValues;
    if (!_.isEmpty(this.state.userSelectedKey)) {
      tagValues =   this.props.collectedInstanceTags.map(this._populateTagValueOptions);
    }

    return (
      <div className="tag-build-component input-group pull-right">
        <span className="input-group-addon"><i className="fa fa-tag"> </i></span>
      <select onChange={this._setUserSelectedTag} name="tag-key-selection" className="form-control input-sm">
        {this.props.collectedInstanceTags.map(this._populateTagKeyOptions)}
      </select>
      <select onChange={this._userSelectedValue} name="tag-value-selection" className="form-control input-sm">
        {tagValues}
      </select>
    </div>
   );
  }
});

var TagBuilderParent=React.createClass({
_newTagSelected（）{
//要添加的代码。用于处理事件和驱动新组件创建的代码
},
render（）{
返回(
添加标签
);
}
});
var TagBuilderContainer=React.createClass({
组件willmount（）{
让_this=this；
collectedInstanceTags=新的反应变量（[]）；
Meteor.call（'getAllMatchingTagsFromCollection'，this.props.templateContext.data.selectedAccount，函数（err，res）{
如果（错误）{
console.log（'error'，err）；
}否则{
console.log（'设置反应变量'）；
收集的标准状态集（res）；
}
});
this.setState（{CollectedStanceTags:CollectedStanceTags}）；
},
componentDidMount（）{}，
render（）{
返回(
);
}
});
var TagBuilder=React.createClass({
getInitialState（）{
返回{
userSelectedKey:“”，
userSelectedValue:“”
};
},
componentDidMount（）{}，
_populateTagKeyOptions（标记、索引）{
返回(
{tag.Key}
);
},
_setUserSelectedTag（事件）{
this.setState（{userSelectedKey:event.target.value}）；
},
_populateTagValueOptions（标记、索引）{
让matchingTagValue；
if（this.state.userSelectedKey==tag.Key）{
matchingTagValue={tag.Value}；
}
返回(
匹配标记值
);
},
render（）{
让tagValues；
if（！\u.isEmpty（this.state.userSelectedKey））{
tagValues=this.props.collectedInstanceTags.map（this.\u populateTagValueOptions）；
}
返回(
{this.props.collectedInstanceTags.map（this.\u populateTagKeyOptions）}
{tagValues}
);
}
});

有不同的方法，但通常建议react中的数据流从较高级别的组件转到较低级别的组件。低级组件是纯哑巴组件，可以使用道具和渲染。高级组件通常拥有数据，并将其作为道具传递给低级组件。在这种情况下，

TagBuilderParent

可以有一个

collectedInstanceTags

状态。它可以执行抓取操作，并将收集的状态标签作为道具传递给

TagBuilderContainer

。添加新标记后，您可以进行重新蚀刻并设置CollectedStanceTags状态。这将导致调用render