复杂数据结构的 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，子级检索它自己的数据。

一个意味着动态检索组件道具，另一个意味着拥有一个“上帝”父母，它拥有其孩子的所有必要数据，哪一个是更好的方法？

我的另一个问题是，将 Choice 作为其 props 的组件是否应根据其 Choice 的类型以不同的方式显示，是制作这样的包装组件的更好方法吗？ ：

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

或者有没有更清洁的选择（我对switch case有点过敏）...

Answer 1

宣传您的第一个问题：

我会选择第一个解决方案，即检索父级中的数据。如果您选择更容易（它将仅在一个地方处理），这将转向某种状态管理 (redux)。

广告您的第二个问题：

您可以使用字典摆脱开关：

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

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

潜在的优势是这种选择——组件映射可以在多个组件之间共享而无需复制，您可以将其存储在模块中并在需要时导入。