javascript - 将所有状态值传递给子组件

Question

我有一个旧应用程序，它传递 JSON 来创建多页表单。我正在尝试创建一个通用的多页面表单组件，我们可以在其中传递 json 来生成表单。

应用程序使用 buildFormState 将父组件中的 state 设置为:

constructor(props) {
  super(props);
  this.state = this.buildFormState();
}

 buildFormState() {
let state = SCREENS.reduce(function(o, s) {
    let _s = s.fields.reduce(function(_o, _f) {
        _o[_f.name] = _f.type == 'checkbox'  ? [] : '';
        return _o;
    }, {});
    return Object.assign(o, _s);
}, {});
state.current_screen = 0;
return state;
}

这是我对 MultiPageForm 组件的调用:

<MultiStepForm SCREENS = {SCREENS} current_screen = {this.state.current_screen} state = {this.state} submitState={this.submitState.bind(this)} uploadPhoto={this.uploadPhoto.bind(this)} completeForm={this.completeForm.bind(this)} />

我在 MultiStepForm 组件中的构造函数是:

constructor(props) {
super(props);
// this.state = this.props;
this.state = this.props.state;
this.SCREENS = this.props.SCREENS
}

但是它不能正确地传递状态，因为有些东西通过了，而另一些则没有。有没有一种方法可以正确传递所有内容，而不必在子组件中单独分配它？

Answer 1

您可以像这样传递所有状态:

<MultiStepForm {...this.state} />

如果您不想拆分它而是将其作为对象发送:

<MultiStepForm childState={this.state} />

使用 state 字符串作为 prop 名称应该不是问题，但最好避免它。