React JS:循环遍历一个多维数组并确定/加载正确的组件

Question

使用React，我从API获取数据，其中的一个示例可以在这里看到。

我需要循环通过body部分(多维数组)，然后确定它是什么类型的"块":

标题
• "
• frameImgeBlock
• quoteImageBlock
• frameQuoteBlock

根据它是哪个块类型，然后我需要创建/加载相应的React组件(正如我想象的那样，最好将这些组件分离到单独的React组件中)。

如何在React/JS中最好地实现这一点?

如果有人能提出一个更简单的方法，我可能能够稍微调整一下API输出。

Answer 1

您可以使用像这样的"translation"函数，它将调用外部组件:

// Import external deps
import Heading from './src/heading';
// Later in your component code
function firstKey(obj) {
  return Object.keys(obj)[0];
}
getDomItem(item) {
  const key = firstKey(item);
  const val = item[val];
  switch (key) {
    case "heading":
      return <Heading heading={ val.heading } ...etc... />
    case "other key..."
      return <OtherElm ...props... />
  }
}
render() {
  // data is your object 
  return data.content.body.map(item => 
    this.getDomItem(item[firstKey(item)])
  );
}