javascript - 使用 React.js 和语义 UI React 呈现动态选项卡

Question

使用 React.js 和 Semantic UI React 我想动态创建标签。

当使用表示选项卡对象数组的 const 时，这工作正常。

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

但是，我需要根据状态变量动态添加这些 source:

getPanes() {
        return this
            .state
            .source
            .map((source) => [{
                menuItem: source.sourceName,
                render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>
            }])
    }
...
<Tab panes={this.getPanes}/>

这导致:

Warning: Failed prop type: Invalid prop `panes` of type `function` supplied to `Tab`, expected an array.

Answer 1

两个问题:

1. this.getPanes 引用您的函数定义，它不会调用 你的功能。你想要你的功能的结果，你应该 应该使用括号调用它:this.getPanes()
2. > .map()返回一个新的元素数组，该数组是将您提供的函数应用于每个原始元素的结果。您真正想要在 .map 中返回的是您的 Pane 对象，而不是一个 Pane 对象的数组:

--

.map((source) => ({ 
  menuItem: source.sourceName, 
  render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> 
}))