javascript - 选项卡未加载 Pane 信息

Question

我在语义-ui-react 中遇到选项卡问题，我正在尝试使用垂直选项卡，如下所示

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

使用如上所示的代码可以正常工作，即当我单击选项卡时，它会在选项卡 Pane 中加载该选项卡的信息。

在我的渲染函数中，我有

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

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

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

谢谢

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

Answer 1

问题是您有一个创建闭包的循环(render 函数)，它引用 var 声明的循环变量 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> }
));