使用React.js与Semantic UI React渲染动态标签页的问题

嘿，我来帮你搞定这个问题！你碰到的报错其实是两个小细节没处理好，咱们一步步修复：

问题1：没有调用getPanes方法 #

你现在写的是：

<Tab panes={this.getPanes}/>

这里你把函数本身传给了panes属性，但Semantic UI的Tab组件需要的是一个数组类型的panes。你需要加上括号调用这个方法，这样才能拿到方法返回的数组：

<Tab panes={this.getPanes()}/>

问题2：map返回了二维数组 #

你的getPanes方法里，map回调返回的是一个包含单个对象的数组（[{ ... }]），这会导致map最终输出的是一个二维数组（比如[[obj1], [obj2]]），而Tab组件需要的是一维的对象数组。

你需要把map里的大括号去掉，直接返回单个对象（用小括号包裹对象，避免箭头函数把大括号当成函数体）：

getPanes() {
  return this.state.source.map((source) => ({
    menuItem: source.sourceName,
    render: () => <Tab.Pane>Content for {source.sourceName}</Tab.Pane>
  }));
}

修复后的完整代码示例 #

import React from 'react';
import { Tab } from 'semantic-ui-react';

class DynamicTabs extends React.Component {
  state = {
    source: [
      { sourceName: 'Record 1' },
      { sourceName: 'Record 2' },
      { sourceName: 'Record 3' }
    ]
  };

  getPanes = () => {
    // 用箭头函数定义方法可以避免手动绑定this的问题
    return this.state.source.map((source) => ({
      menuItem: source.sourceName,
      render: () => <Tab.Pane>Tab content for {source.sourceName}</Tab.Pane>
    }));
  };

  render() {
    return <Tab panes={this.getPanes()} />;
  }
}

export default DynamicTabs;

另外补充个小提示：如果你的getPanes方法里用到了this，用箭头函数定义方法（像上面示例那样），或者在组件的constructor里绑定this，能避免出现this指向错误的问题。

内容的提问来源于stack exchange，提问作者Adrian Elder