使用 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

两期：

this.getPanes 指的是你的函数定义，它不调用你的功能。你想要你的功能的结果，你应该应该调用它使用括号：this.getPanes()
.map() returns 一个新的元素数组，它是将您提供的函数应用于每个原始元素的结果。您真正想要 return 在 .map 中的是您的窗格对象，而不是一个窗格对象的数组：

--

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

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

Rendering dynamic tabs with React.js and Semantic UI React

javascript

reactjs

semantic-ui-react