Question

我正在将React集成到现有应用中。这个应用程序是数据密集型的，数据结构非常复杂，这让我很难适应React模式，尤其是无状态和组合。

给出这样的数据：

＆＃13;

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

＆＃13;

由于这些数据是通过ID链接的，因此我有两种可能：

检索父组件中的子数据并将其传递给子组件。
传递ID，孩子们会检索自己的数据。

一个意味着动态检索组件道具，另一个意味着拥有一个＆＃34; god＆＃34;父母拥有其子女的所有必要数据，哪一个是更好的方法？

我的另一个问题是，如果将选择作为其道具的组件应根据其类型选择显示不同，是否更好的方法来制作这样的包装器组件？：

＆＃13;

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

＆＃13;

还是有更清洁的选择（我对转换病例有点过敏）......

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 />;
    }
}

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

ReactJS具有复杂数据结构的最佳实践

1 个答案: