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：

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

制作组件，然后在对象（地图）中引用它们：

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

Voilà：）

<Wrapper data={data} />

Answer 2

我建议使用Array来保存和渲染多个孩子

const Component1 = () => <Text>One</Text>
const Component2 = () => <Text>One</Text>

const childs = [
  Component1,
  Component2
]
return childs

React能够按原样呈现数组。其他可能的解决方案可能是，

return Object.keys(child).map(item => childs[item] )

Answer 3

快速解决方案可以是react-native-dynamic-render

此外，您可以使用它来渲染嵌套的组件。

完整的示例是here

从JSON

3 个答案: