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()返回一个新的元素数组，这是将提供的函数应用于每个原始元素的结果。您真正希望在.map内返回的是您的窗格对象，而不是一个窗格对象的数组：

-

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

使用React.js和语义UI React

1 个答案: