cotentful api将内容类型映射到reactjs中的组件答案

【问题标题】：cotentful api map content types to components in reactjscotentful api将内容类型映射到reactjs中的组件
【发布时间】：2016-11-28 23:50:52
【问题描述】：

我正在使用内容 API 来获取新闻文章的内容，并且正文包含不同的字段，例如问题和答案。我使用 api 将内容作为 json 获取，并将主体作为对象数组获取。

      "body": [
      {
        "question": "what's up?"
      },
      {
        "answer": "good good"
      }
    ],

我想知道是否可以将 body 数组中的每个字段映射到不同的 react 组件并将正确的 props 传递给该组件？

<div {...other}>
   {items.map((item, key) => (
     React.cloneElement(children, {
       key,
       ...item,
     })
   ))}
</div>

【问题讨论】：

是的，你可以。你试过什么了？查看facebook.github.io/react/docs/components-and-props.html 了解有关组件和属性的更多信息。
我已经尝试映射然后问题是我不知道文章正文将包含什么。 body 数组就像一个由不同元素组成的数组，所以问题会是具有特定样式的 p，答案也是如此
我建议您在问题中添加一些代码，以更清楚地了解您尝试过的内容以及您想要实现的目标。我不太明白您所说的“不同元素的数组”和“具有特定样式的 p”是什么意思。

【解决方案1】：

您想要实现的基本上是将 contentType 中的每个 type 字段（如 Text LongText 等）映射到反应组件。

如果是这种情况，您可以先请求您的 contentType 并遍历其字段，然后根据 type 属性将其映射到您的反应组件，我们在 discovery app 中使用相同的方法。

这个snippet 的代码将让您大致了解如何实现这一目标。顺便说一句，该应用程序是使用 react 和 redux 创建的，它与 contentful 中创建的任何类型的内容兼容。所以你可能会在那里找到更多有用的东西来创建你当前的项目。

最好的，

哈立德

【讨论】：

是的，我有一个主要的 contentType，它有一个名为 body 的字段，它是对其他 contentTypes 的引用。我可以从主 contentType 访问这些字段，还是必须调用 body 字段中的每个 contentType？ @Khaled Garbaya
如果您使用 client.getContentTypes() 请求所有 contentTypes，并且对于每个链接，您可以使用其 sys.id 从您的集合中获取链接的 ContentType。因此，您的映射可以从主要的 contentType 开始递归，并根据您拥有的链接 contenType 的数量进行深入。