json - 从 JSON 渲染 React Native 元素

Question

我四处搜索...找不到我要找的东西，所以我感谢任何帮助!这就是我想要的:

我正在为 React Native 应用程序构建类似 CMS 的设置。这样应用程序的管理员就可以登录 CMS 仪表板，并更新应用程序的页面/ View ，而无需进入硬编码。我希望他们能够从预设的组件列表中进行选择，并能够按照他们想要的任何顺序将它们拖放到应用程序中，并且能够更新内容和颜色等。让我举个例子...

我想象有一个主页，顶部有一个旋转横幅，然后是一个信息模式按钮，然后是一组转到子页面的菜单链接。

所以我认为，从开发角度来看，是为应用程序管理员提供所见即所得类型的设置，并将其结果存储在数据库中。它可以在数据库中存储为:

<RotatingBanner />
<Modal />
<ContentMenu>
    <ContentMenuLink title="About" />
    <ContentMenuLink title="Competitive" />
    <ContentMenuLink title="Recreational" />
    <ContentMenuLink title="Tournaments" />
<ContentMenu />

现在，当我尝试将其渲染到屏幕上时，我会继续将其渲染为实际单词与它们所代表的组件(如果有意义的话)。因此页面看起来就像上面的代码块，而不是看到旋转的横幅和模式等。

我尝试过一个工具将 HTML 转换为 React Native 元素...有谁知道如何转换获取的 JSON，如下所示:

{content: "<RotatingBanner /><Modal /><ContentMenu>...."}

并让它在渲染函数中创建真正的组件吗？如果您愿意，我们将不胜感激关于创建此类 CMS 的任何其他想法或想法/建议。

谢谢!

Answer 1

假设您有以下 JSON:

const data = {
  "components": [
    {"name": "component1", props: {"hello": "world"}},
    {"name": "component2", props: {"color": "red"}},
  ]
}

制作组件，然后在对象( map )中引用它们:

import Component1 from './Component1'
import Component2 from './Component2'

const COMPONENT_MAP = {
  component1: Component1,
  component2: Component2,
}

然后制作你的包装组件:

const Wrapper = ({data}) => (
  <View>
    {data.components.map(({name, props}) => {
      const Component = COMPONENT_MAP[name]
      return <Component {...props} />
    }}
  </View>
)

瞧:)

<Wrapper data={data} />