根据从服务器/数据库接收到的数据创建组件答案

【问题标题】：Creating components based on data received from server/database根据从服务器/数据库接收到的数据创建组件
【发布时间】：2022-01-13 04:38:41
【问题描述】：

我正在尝试创建一个博客提要，该提要是从从服务器/文件获取的数据集生成的，到目前为止，我已经创建了一个组件来呈现数据，但我使用的源使用了基本的 HTML 组件，其中我使用另一个名为 CoreUI 的框架来包装我的数据。

这是渲染组件：

import { CardCreator } from './customComponent/CardCreator'
import { createElement } from 'react'
import { CustomHeader } from './customComponent/CustomHeader'
import { CustomCardBody } from './customComponent/CustomCardBody'
import { CustomCardFooter } from './customComponent/CustomCardFooter'


const keysToComponentMap = {
  CCard: CardCreator,
  CCardHeader: CustomHeader,
  CCardBody: CustomCardBody,
  CCardFooter: CustomCardFooter,
}

export const renderComponent = (config) => {
  console.log(config)
  if (typeof keysToComponentMap[config.component] !== 'undefined') {
    return createElement(
      keysToComponentMap[config.component],
      config.children &&
        (typeof config.children === 'string'
          ? config.children
          : config.children.map((c) => renderComponent(c))),
    )
  }
}

这是我用来测试的虚拟数据

export const config = {
  component: 'CCard',
  children: [
    {
      component: 'CCardHeader',
      children: ['dummy'],
    },
    {
      component: 'CCardBody',
      children: ['dummy'],
    },
    {
      component: 'CCardFooter',
      children: ['dummy'],
    },
  ],
}

export default config

理论上这应该递归地创建元素并在 DOM 中渲染它们，但由于某种原因我无法让它工作。

【问题讨论】：

标签： reactjs core-ui

【解决方案1】：

显然，如果我的虚拟数据将是一个简单的字符串，那么我应该使用 children:"dummy" 来代替我的子数组。有点愚蠢的错误，解决的时间太长了。

【讨论】：