从JSON渲染React Native元素

Question

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

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

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

所以我认为,开发方面,就是给应用程序管理员一种WYSIWYG类型的设置,并将其结果存储在数据库中.它可以在数据库中存储为:

<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：

\n\n

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

\n\n

创建您的组件，然后在对象（映射）中引用它们：

\n\n

import Component1 from \'./Component1\'\nimport Component2 from \'./Component2\'\n\nconst COMPONENT_MAP = {\n  component1: Component1,\n  component2: Component2,\n}\n

\n\n

然后制作你的包装组件：

\n\n

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

\n\n

瞧\xc3\xa0:)

\n\n

<Wrapper data={data} />\n

\n