複雑なデータ構造を持つReactJSのベストプラクティス

Question

Reactを既存のアプリケーションに統合しています。このアプリはデータ集約型で、データ構造はかなり複雑なので、Reactパターン、特にステートレスとコンポジションを適応するのは少し難しいです。

component: { 
 
    options: [optionA, optionB, optionC] 
 
} 
 

 
options: { 
 
    optionA : { 
 
    name: 'FOO', 
 
    choices: [choiceA, choiceB, choiceC] 
 
    }, 
 
    optionB : { 
 
    name: 'BAR', 
 
    choices: [choiceD, choiceE] 
 
    }, 
 
    ... 
 
} 
 

 
choices: { 
 
    choiceA : { 
 
    type: 'typeA', 
 
    choices: [choiceA, choiceB, choiceC], 
 
    name: 'abb' 
 
    }, 
 
    choiceB : { 
 
    type: 'typeB', 
 
    name: 'abc' 
 
    }, 
 
    ... 
 
}

このデータはIDによってリンクされているので、私は二つの可能性があります：

1. を親コンポーネントの子どもたちのデータを取得し、それを渡し、このようなデータが与えられた

   子供に。

2. IDを渡すと、子はそれ自身のデータを取得します。

一つは、動的コンポーネントの小道具を取得意味し、他のは、それが1より良いアプローチである子供、だために必要なすべてのデータを持っている「神」親を持つ意味しますか？

私の他の質問は、Choiceをその小道具の種類によって異なるように表示するコンポーネントが、このようなラッパーコンポーネントを作成するためのより良いアプローチですか？ ：

class Choice extends Component { 
 
    constructor(props){ 
 
    super(props); 
 
    } 
 
    
 
    render(){ 
 
    switch(props.choice.type){ 
 
     case "typeA": 
 
     return (<TypeAComponent />); 
 
     case "typeB": 
 
     return (<TypeBComponent />); 
 
     default: 
 
      return (..); 
 
    } 
 
    } 
 
}

またはクリーナーの代替は（私はケースを切り替えるにアレルギーのビットです）があり...

Answer 1

広告あなたの最初の質問：

I最初の解決策、すなわち親のデータを取り出すことを選ぶでしょう。これにより、ある種の状態管理（redux）への移行が非常に簡単になります（1か所でのみ処理されます）。

あなたは辞書を使用してスイッチを取り除くことができます：

const choiceRenderers = { 
    "typeA":() => <TypeAComponent />, 
    "typeB":() => <TypeBComponent />, 
    // etc. 
}; 

class Choice extends Component { 
    render() { 
     const renderer = choiceRenderers[this.props.choice.type]; 
     return renderer 
      ? renderer() 
      : <DefaultChoice />; 
    } 
} 

潜在的な利点は、この選択・コンポーネントのマッピングはなしで複数のコンポーネント間で共有することができることであるあなたの2番目の質問

広告それを複製すると、それをモジュールに格納し、必要なときにインポートすることができます。