javascript - Babel希望 “,”应该在哪里 “.”？

Question

因此，以下实现可以很好地读取JSON数据并将其转换为呈现的组件-直到我尝试添加子代为止。然后，它吐出一个错误。
功能:

const catalogRenderer = (config) => {
  if (typeof KeysToComponentMap[config.component] !== "undefined") {
    return React.createElement(
      KeysToComponentMap[config.component],
      {
        key: config.key,
        title: config.title
      },
      {
        config.children && config.children.map(c => catalogRenderer(c))
      }
    );
  }
}

错误:

app.js:134 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js)
"...Scripts/CatalogRenderer.js: Unexpected token, expected "," (25:14)"

安慰:

 },
  24 |       {
> 25 |         config.children && config.children.map(c => catalogRenderer(c))
     |               ^
  26 |       }
  27 |     );
  28 |   }

我将 react 用作 Electron 应用程序的一部分，关于所有运动部件的说法很长，但是到目前为止，其他所有功能都很好。在编辑器中，如果我移至前面的{，从那神秘的不喜欢。在第25行上，它突出显示了该时间段，好像这应该以某种方式将方括号括起来一样。
我对这里的语法有什么不了解的地方吗？如果我尝试像这样映射和渲染子代，则会发生相同的事情:

      {
        config.children.map(c => catalogRenderer(c))
      }

我尝试将整个语句括在方括号，花括号，括号中-不管我做什么，babel似乎都希望使用逗号，但是给它加上逗号显然无济于事。知道我在做什么错吗？
eta:这是我尝试从中渲染的JSON对象:

    const catConfig = {
      catalog: [
        {
          component: 'pen',
          title: `B.C. Palmer`,
          key: `B.C.PalmerPen`,
          children: `A child string`
        },
        {
          component: 'content',
          key: `B.C.PalmerWorldList`,
          children: [
            {
              component: 'world',
              title: `Rismere`,
              key: `RismereWorld`
            },
            {
              component: 'content',
              key: `RismereSeries`,
              children: [
                {
                  component: 'series',
                  title: `The Eidolon War`,
                  key: `TheEidolonWarSeries`
                },
                {
                  component: 'content',
                  key: `TheEidolonWarBooks`,
                  children: [
                    {
                      component: 'book',
                      title: `Magic's Heart`,
                      key: `MagicsHeartBook`
                    },
                    {
                      component: 'book',
                      title: `Magic's Fury`,
                      key: `MagicsFuryBook`
                    },
                    {
                      component: 'book',
                      title: `Magic's Grace`,
                      key: `MagicsGraceBook`
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          component: 'pen',
          title: `Simon Strange`,
          key: `SimonStrangePen`
        }
      ]
    }

该JSON将通过数据库调用生成，并在每次数据库更新时写入，并更新“目录”组件的状态。
因此，例如，上面的目录数组中的第二个对象是一个容器，当单击第一个“笔”组件时，该容器将变为可见并显示“世界”组件的列表(在这种情况下，只是一个组件)。 ，该函数只能成功渲染任何“父”组件-如果我在第24和26行中删除了花括号，它只会跳过它们，但不会出错。
这些组件由按钮元素和div(内容)组成。当我开始工作时，按钮可能会变成Link元素，但是原始版本是用普通javascript编写的，我还没有实现与目录的路由。因此，笔组件例如:

import React from 'react'

export default penButton => {
  return(
    <button className="catalogItem pen">
      <img src="src/icons/catPenName.png" className="catalogIcon"/>
      <p className="contentLabel">{penButton.title}</p>
    </button>
  )
}

是顶级组件，可以很好地渲染。它的下一个同级(以及除书本之外的任何其他按钮的下一个同级)都是内容:

import React from 'react'

export default contentList => {
  return(
    <div className="contentList">
    </div>
  )
}

contentList只是具有contentList类的div，用于处理可见性和动画。我应该在JSON中的“children”键中放置一个地方来填充内容的子级吗？

Answer 1

当您想将多子级元素渲染到您的react组件中时，您需要将每个子级作为单独的参数传递。
参见以下答案作为示例:
how to render multiple children without JSX
因此，您的解决方案应该是使用spread syntax。
这是一个例子:

const catalogRenderer = (config) => {
  if (typeof KeysToComponentMap[config.component] !== "undefined") {
    let childs = [];
    if (config.children) {
      childs = config.children.map(c => catalogRenderer(c));
    } 
    return React.createElement(
      KeysToComponentMap[config.component],
      {
        key: config.key,
        title: config.title
      },
      ...childs
    );
  }
}