使用复杂数据结构的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作为道具的组件应该根据其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

广告您的第一个问题：

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

广告您的第二个问题：

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

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

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