Babel 期望“,”应该有一个“.”？

Question

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

function：

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 行，它突出显示了句点，好像这应该以某种方式关闭括号。

这里的语法有什么我不理解的地方吗？ 如果我尝试只使用 map 并像这样渲染孩子，也会发生同样的事情：

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

我尝试将整个语句括在方括号、花括号、圆括号中——无论我做什么，babel 似乎都需要一个逗号，但给它一个逗号显然没有帮助。 知道我做错了什么吗？

eta：这是 JSON object 我试图从：

    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 将通过数据库调用生成，并在每次更新数据库时写入，并更新“目录”组件的 state。

因此，例如，上面目录数组中的第二个 object 是一个容器，当单击第一个“笔”组件时，它变得可见并显示“世界”组件列表（在这种情况下，只有一个。）但是，function 只能成功渲染任何“父”组件——如果我在第 24 行和第 26 行取出花括号，它只会跳过它们但不会出错。

组件由按钮元素和一个 div（内容）组成。 当我开始工作时，按钮可能会成为链接元素，但原始版本是用 vanilla 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 class 的 div，它处理可见性和 animation。 我应该在 JSON 中为“children”键留一个位置来填充内容的孩子吗？

Answer 1

当您想将多个子元素渲染到您的反应组件中时，您需要将每个子元素作为单独的参数传递。

以这个答案为例： how to render multiple children without JSX

所以你的解决方案应该是使用传播语法。

这是一个例子：

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

Answer 2

嗯，这很简单而且有点傻。 我将内容组件更新为：

import React from 'react'

export default contentList => {
  return(
    <div className="contentList">
      {contentList.children} <---- added
    </div>
  )
}

内容没有放置孩子的地方。 明显地。