Babel 在应该有“.”的地方期待“,”？

Question

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

函数：

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

我对这里的语法有什么不理解的地方吗？如果我尝试像这样映射和渲染 children，也会发生同样的事情：

      {
        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 将通过数据库调用生成，并在每次更新数据库时写入，并更新 'catalog' 组件的状态。

因此，例如，上面目录数组中的第二个 object 是一个容器，当单击第一个 'pen' 组件时，它变得可见并显示 'world' 组件（在这种情况下，只有一个。）但是，该函数仅成功呈现任何 'parent' 组件——如果我在第 24 行和第 26 行取出花括号，它只是跳过它们但不会出错.

组件由按钮元素和一个div（内容）组成。当我开始工作时，按钮可能会变成 Link 元素，但原始版本是用 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 只是一个 div 和 contentList class，它处理可见性和动画。我是否应该在 JSON 中为“children”键放置一个位置来填充内容的 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
    );
  }
}

Answer 2

好吧，这很简单，但有点傻。我将内容组件更新为：

import React from 'react'

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

内容没有放置的地方children。很明显。

Babel 在应该有“.”的地方期待“,”？

Babel expects "," where there should be a "."?

javascript

reactjs

babeljs

electron