すべての状態値を子コンポーネントに渡す

Question

JSONを渡して複数ページフォームを作成する従来のアプリケーションがあります。私はフォームを生成するためにjsonをちょうど通過できる共通の複数ページフォームコンポーネントを作成しようとしています。

アプリケーションのように親コンポーネントでstateを設定buildFormStateを使用しています。

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コンポーネントで

<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)} /> 

そして、私のコンストラクタ：

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文字列の使用など小道具の名前は問題ではないはずですが、それでもそれを避ける方がいいです。