反応コンポーネント - 親子の対話。コンポーネントのライフサイクル

Question

私は、ユーザーから特定のデータを取得するための簡単なブラウザアプリケーションを開発しています。 私はそのデータを収集するプロセスを簡素化するためにいくつかのコンポーネントを用意していますが、現在このコンポーネントのレンダリング方法を再考しています。

基本的には、どのコンポーネントをレンダリングするかを状態を使用して管理する主なコンポーネントがあります。

私はこれを自分のコンポーネントのほぼすべてに対して行っています。 また、私は親コンポーネントの内部に関数を持っています。これは、私が小道具を介して子コンポーネントに渡し、そのコンポーネントがもう役に立たなくなったときに子ステートを親に渡すコールバックとして使用されます。

class Main extends React.Component { 
    constructor(props){ 
    this.state = { 
     renderA: true, 
     renderB: false, 
     childState: null 
    } 
    } 

    collectState(state){ 
     this.setState({ 
     childState: state 
    }); 
    } 

    render() { 
    let content = null; 
    if(this.state.renderA === true){ 
     content = <ComponentA /> 
    } else { 
     content = <ComponentB /> 
    } 
    return(
     <div> 
     {content} 
     </div>); 
    } 
} 

ので、上記の例を使用して、子供がこの

class ComponentA extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     stop: false, 
     usefullInfo: null 
    } 

    destroy() { 
     this.props.collectstate(this.state.usefullInfo) 
    } 

    render(){ 
    render something (like a Form) untill this.state.usefullInfo is set; 
    in that case, set this.state.stop true which will call destroy, passing the usefull information to parent 
    } 
} 

ようなものになるだろうので、この方法が私のために動作しますが、私はおそらくこれがへの道ではないというはっきりと見ることができますこれを行う。この時点で

は、私の質問は以下のとおりです。

1）私はthis.state.stopようないくつかのプロパティでそれを追跡することなく、コンポーネントのレンダリングを停止することができますか？

2）メインコンポーネントのように2つの異なるコンポーネントをレンダリングしたい場合は、常にレンダリングするためにrenderAとrenderBプロパティをstateに保持する必要がありますか？

3）子から親に情報を渡すより良い方法がありますか？私は現在、親から子への小道具を介して渡されたコールバック関数を使用しています。コンポーネントがその目的を果たしたときにそのコールバックを呼び出すのですか？

4）上記のコードの品質を改善する方法に関する一般的な提案はありますか？

ありがとうございました:)！

Answer 1

あなたの例はうまくいきますが、複数の子供（source）からのデータを扱うときには、持ち上げ状態をにすることをお勧めします。だから私は親のすべての子供の状態を保ち、値とハンドラーを持つ小道具を​​子供に渡すことをお勧めします。

ここにはsample appがあります。フォームコンポーネントは、実装するケースを処理します。

は、あなたの質問に答えるために：

1. 親コンポーネントは子コンポーネントをレンダリングするかどうかを、自身の状態に基づいて、決定する必要があります。
2. どのコンポーネントをレンダリングするかについて変数を状態に保つ必要はありません。親の状態に基づいてrender()で計算する必要があります
3. はい、コールバックは親に情報を渡すために推奨される方法です
4. コードの品質はよく見えます。あなたはきれいなやESlintのようなツールを使っていつでもうまくやることができます。

はここに例を示します

class Main extends React.Component { 
    constructor(props) { 
    this.state = { 
     stateA: '', 
     stateB: '', 
    }; 
    } 

    handleStateChange(name, value) { 
    this.setState({ 
     [name]: value, 
    }); 
    } 

    render() { 
    const { stateA, stateB } = this.statel; 

    const shouldRenderA = !stateA; 

    if (shouldRenderA) { 
     return <ComponentA value={stateA} onChange={value => this.handleStateChange('stateA', value)} />; 
    } 
    return <ComponentB value={stateA} onChange={value => this.handleStateChange('stateB', value)} />; 
    } 
} 

class ComponentA extends React.Component { 
    render() { 
    const { value, onChange } = this.props; 

    return <input type="text" value="value" onChange={onChange} />; 
    } 
}