Question

我在语义ui-react中遇到Tabs问题，我正在尝试使用这里显示的垂直标签

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

问题是你有一个创建闭包的循环（2.12函数），它引用了var声明的循环变量render。循环之后，所有渲染函数都引用相同的i，现在它将具有值i。您可以通过将2更改为var来解决此问题，这会导致每个循环迭代中的let具有自己的范围。或者，您可以使用i代替循环：

map

选项卡未加载窗格信息

1 个答案: