选项卡未加载窗格信息

Question

我在语义-ui-反应中遇到制表符问题，我正在尝试使用此处所示的垂直制表符

https://react.semantic-ui.com/modules/tab#tab-example-vertical-true

示例中使用的代码是这样的：

import React from 'react'
import { Tab } from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
]

const TabExampleVerticalTrue = () => (
  <Tab menu={{ fluid: true, vertical: true, tabular: 'right' }} panes={panes} />
)

export default TabExampleVerticalTrue

使用上面显示的代码可以正常工作，即当我单击一个选项卡时，它会在选项卡窗格中加载该选项卡的信息。

在我的渲染函数中我有

<Tab menu={{ fluid: true, vertical: true, tabular: 'right' }} panes={panes} />

当我尝试替换下面我的代码提供的窗格时，单击时它不会更改选项卡，它显示新选项卡已被单击但不会加载新选项卡窗格。

const panes = [];
for(var i = 0 ; i < 2 ; i++) {
  panes.push({ menuItem: (i+1).toString(), key:{i}, render: () =>(<Tab.Pane>{i}</Tab.Pane>) })
};

谢谢

编辑：我认为它正在更改选项卡，但在渲染时我认为选项卡窗格中的 i 值正在渲染 for 循环末尾的值，而不是将值设置为 for 循环内的值每次迭代

Answer 1

问题是您有一个创建闭包的循环（render 函数），它引用 var-declared 循环变量 i。循环后，所有渲染函数都引用同一个 i，它现在的值为 2。您可以通过将 var 更改为 let 来修复它，这会导致每个循环迭代中的 i 都有自己的范围。或者，您可以使用 map 而不是循环：

const panes = new Array(2).fill().map((__, i) => (
  { menuItem: ''+(i+1), key:{i}, render: () => <Tab.Pane>{i+1}</Tab.Pane> }
));

选项卡未加载窗格信息

Tabs not loading pane information

javascript

reactjs

semantic-ui-react