传入反应组件的语言对象道具答案

【问题标题】：Language object prop to pass in the react component传入反应组件的语言对象道具
【发布时间】：2021-08-20 10:43:55
【问题描述】：

我使用找到的教程创建了一个演示。

这是演示 => https://codesandbox.io/s/strange-monad-otv0g?file=/src/language.js

在App.js 中，侧边栏接收对象数组作为道具，一切正常

  const sidebaritems = [
    {
      name: "first",
      label: "First",
      items: [
        { name: "sublink2", label: "SubLink 1" },
        { name: "sublink3", label: "SubLink 2" }
      ]
    },
    "divider",
    {
      name: "second",
      label: "Second",
      items: [
        { name: "subLink 1", label: "SubLink 1" },
        { name: "subLink 2", label: "SubLink 2" }
      ]
    },
    "divider",
    {
      name: "third",
      label: "Third"
    }
  ];




<SideBar items={sidebaritems} />

我现在想使用我导入的外部数据语言文件，其中我有其他翻译，还有sidebaritems 要传递，所以我创建了language.js 并导入App.js

import dataForTexts from "./language.js";

我的问题是，我怎样才能从language.js 中的sidebar 组件中的app.js 中的sidebaritems 传递相同的app.js

【问题讨论】：

你想合并sidebaritems和来自language.js的列表吗？
只通过sidebaritems或者如果你有更好的方法，你可以告诉我
这不是默认导出，因此您需要import { dataForTexts } from "./language.js";（注意花括号）。然后使用<SideBar items={dataForTexts.sidebaritems} />
我明白了 => 无法读取未定义的属性“sidebaritems”，如果您可以发布您的答案并在演示中显示，我接受它
复制：How to import and export components using React + ES6 + webpack?

标签： javascript reactjs

【解决方案1】：

您需要一个命名导入来导入您的 dataForTexts 。因此，将您的导入语句更改为

import { dataForTexts } from "./language.js";

现在将sidebaritems 传递为

<SideBar items={dataForTexts.sidebaritems} />

【讨论】：

【解决方案2】：

据我了解，您需要这个。作为项目，您只需要从 language.js (dataForTexts) 传递数据

【讨论】：

这行不通（见我的评论）。另外，请不要发布代码图像；邮政编码。