Javascript 从组件聚合数据

将一个大组件拆分为多个小组件并聚合其数据的最佳方法是什么？我想访问FormComponent中BillingDataComponent、NameComponent和AddressComponent的状态

例如：

var FormComponent = React.createClass({
  _onClick: function() {
    // Access child data here
    var name = ???
    var address = ???
    var billingData = ???

    ActionCreator.updateFormDataOnServer(formDataAggregatedFromChildren);
  },

  render: function() {
    return (
      <div>
        <form>
          <NameComponent name="Maybe the name is already set?" />
          <AddressComponent />
          <BillingDataComponent />
          <button onClick={this._onClick} >Submit</button>
        </form>
      <div>
    );
  }
});

var NameComponent = React.createClass({  
  _onChange: function(e) {
    this.setState({
      value: e.target.value
    });
  },

  render: function() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this._onChange} />
      </div>
    );
  }
});

// AddressComponent and BillingDataComponent similiar

var FormComponent=React.createClass({
_onClick:function（）{
//在此处访问子数据
变量名称=？？？
变量地址=？？？
var billingData=？？？
ActionCreator.updateFormDataOnServer（formDataAggregatedFromChildren）；
},
render:function（）{
返回(
提交
);
}
});
var NameComponent=React.createClass（{
_onChange：函数（e）{
这是我的国家({
价值：即目标价值
});
},
render:function（）{
返回(
);
}
});
//AddressComponent和BillingDataComponent相似

您应该让

表单组件拥有数据，并将其作为道具传递给其他组件。当数据应该更改时，子项应该将更改传播到表单：

var FormComponent = React.createClass({
  getInitialState: function() {
    return {
      name: ""
    };
  },

  _onClick: function() {
    // Access child data here
    var name = ???
    var address = ???
    var billingData = ???

    ActionCreator.updateFormDataOnServer(formDataAggregatedFromChildren);
  },

  _onNameChange: function(name) {
    this.setState({
      name: name
    });
  },

  render: function() {
    return (
      <div>
        <form>
          <NameComponent onChange={this._onNameChange} value={this.state.name} />
          <AddressComponent />
          <BillingDataComponent />
          <button onClick={this._onClick} >Submit</button>
        </form>
      <div>
    );
  }
});

var NameComponent = React.createClass({  
  _onChange: function(e) {
    this.props.onChange(e.target.value);
  },

  render: function() {
    return (
      <div>
        <input type="text" value={this.props.value} onChange={this._onChange} />
      </div>
    );
  }
});

// AddressComponent and BillingDataComponent similiar

var FormComponent=React.createClass({
getInitialState:函数（）{
返回{
姓名：“
};
},
_onClick:function（）{
//在此处访问子数据
变量名称=？？？
变量地址=？？？
var billingData=？？？
ActionCreator.updateFormDataOnServer（formDataAggregatedFromChildren）；
},
_onNameChange:函数（名称）{
这是我的国家({
姓名：姓名
});
},
render:function（）{
返回(
提交
);
}
});
var NameComponent=React.createClass（{
_onChange：函数（e）{
this.props.onChange（即target.value）；
},
render:function（）{
返回(
);
}
});
//AddressComponent和BillingDataComponent相似