Рендеринг динамических вкладок с помощью React.js и Semantic 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, это ваш объект панели, а не массив одного объекта панели:

-

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