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

內容沒有放置孩子的地方。 明顯地。