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字符串作为道具名称应该不是问题，但最好还是避免它。

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

1 个答案: