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' 
 
    }, 
 
    ... 
 
}

Поскольку эти данные связаны идентификаторами У меня есть две возможности:

1. Retrieve детей данных в родительском компоненте и передать его для детей.

2. Передайте идентификатор, и дети извлекают его собственные данные.

Один предполагает динамическое извлечение компонентов реквизита, а другие предполагают, имеющий «бог» родитель, который имеет все необходимые данные для его детей, которых один является лучшим подходом?

Мой другой вопрос в том, должен ли компонент, который выбирает выбор в качестве реквизита, по-разному в зависимости от типа его выбора, является лучшим подходом к созданию такого компонента-обертки? :

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), если вы выберете намного проще (он будет обрабатываться только в одном месте).

объявления Ваш второй вопрос:

Вы можете избавиться от коммутатора с использованием словаря:

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

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

Потенциальное преимущество в том, что этот выбор-компонент отображения может быть разделен между несколькими компонентами без реплицируя его, вы можете просто сохранить его в модуле и импортировать, когда это необходимо.