Question

我有一堆表示选项卡组件中的选项卡的类。每个类都有一个名为title的静态方法。以下是使用它们的代码：

import { Tab1, Tab2, Tab3, Tab4, Tab5} from '../../components';
var tab_classes = [
  Tab1,
  Tab2,
  Tab3,
  Tab4,
  Tab5
]

{tab_classes.map(tabclass =>
  <Tab className="nav-item">
    <a className="nav-link active" href="#">{tabclass.title()}</a>
  </Tab>
)}

它以Uncaught TypeError: Cannot read property 'title' of undefined失败。我在控制台中进行了模拟测试，它确实可以在列表中填充类并以这种方式迭代它们。由此我们得出结论，这里的问题是它们被导入（我删除了extend React...并且没有发生任何事情）。我不知道导入如何使它们与众不同。

为什么这段代码会失败？

Answer 1

您的应用程序结构中的文件与 ../../ components 之间可能存在循环依赖关系。这将导致在 TabN 组件本身初始化之前使用数组文字初始化 var tabClasses ，具体取决于首先导入的文件。

＆＃xA;

Answer 2

您确定已正确输入导入行中类的名称吗？

var {a, b, c} = {a: 1, b:2, d:4}
console.log(c) // -> undefined

迭代导入的类列表

2 个答案: