Babel 期望“，”应该有一个“。”？答案

【问题标题】：Babel expects "," where there should be a "."?Babel 期望“，”应该有一个“。”？
【发布时间】：2021-04-01 15:46:45
【问题描述】：

因此，以下实现可以很好地读取 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 作为电子应用程序的一部分，这是一个关于所有移动部件的长篇故事，但到目前为止，其他一切都运行良好。在编辑器中，如果我从那个神秘的不喜欢移动到前面的 { 。在第 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（内容）组成。当我得到这个工作时，按钮可能会成为链接元素，但原始版本是用香草 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”键留一个位置来填充内容的子级吗？

【问题讨论】：

您正在使用{ ... } 定义一个对象，但您没有为您的值分配键
@Sysix 是指错误本身吗？ ...Scrips/CatalogRendere.js?如果是这样，那只是为了缩短路径。如果不是，那么我不确定我知道你的意思。 Config 是传入要映射的 json 数组对象，它有一个键 'children'，它是一个数组。例如，config.title 可以正常工作并将标题传递给组件。
是的，在您的示例中，编译器不知道密钥是什么，是config、children 还是map？

标签： javascript reactjs electron babeljs

【解决方案1】：

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

以这个答案为例： 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
    );
  }
}

【讨论】：

要渲染的孩子在 JSON 文件中定义。我不确定如何在不在其他文件中定义子项列表的情况下使用传播语法。我正在做的是将一个包含笔名、故事世界、系列和书籍的目录从数据库中提取到 JSON 对象中。我用当前的测试对象附加了问题。
您的children 是array，所以语法应该可以工作。我们不知道您的子组件如何获取参数。能否以content 和world 组件为例
所以内容组件只是一个带有附加样式的div：``` export default contentList => { return(

) } ``` 我的对 createElement() 的理解是第三个参数定义了任何孩子，我期望它会映射到 JSON 中的“孩子”键并遍历它们。世界组件没有直接的孩子。这是一个按钮，它带有一个兄弟，在这种情况下是一个内容的孩子。
编辑了问题以提供格式更好的笔和内容示例。只有内容才会有孩子，这些孩子将是进一步嵌套的按钮/内容组件。

【解决方案2】：

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

import React from 'react'

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

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

【讨论】：