Question

当我尝试在.map函数中呈现TabPane时，出现以下问题：我的组件（DepartmentView）仅针对第一个TabPane呈现，而下一个TabPane内容为空。我正在使用 ANT Design 库。我的问题是如何从.map函数为每个TabPane渲染DepartmentView？

 <Tabs tabPosition="left" className="tab-view-page">
  {
    data.map((item) => (
      <TabPane
        tab={(
          <CustomTabTitle
            title={item.name}
            subtitle=""
          />
        )}
        key={item.id}
      >
        <DepartmentView data={item} />
      </TabPane>
    ))
  }
</Tabs>

DepartmentView组件：

<div className="main-section">
    <div className="horizontal-tabs-container">
      <Tabs className="horizontal-tabs-profile">
        <TabPane tab={<FormattedHTMLMessage id="layout.tabs.overview" />} key="overview">
          Here will be overview page
        </TabPane>
        <TabPane tab={<FormattedHTMLMessage id="layout.tabs.staff" />} key="staff">
          <Employees />
        </TabPane>
        <TabPane tab={<FormattedHTMLMessage id="layout.tabs.settings" />} key="settings">
          <Settings />
        </TabPane>
      </Tabs>
    </div>
  </div>

Answer 1

我没有看到任何语法错误。也许您可以检查data数组的长度是否大于1，并且每个item对象都具有所有必需的键。

Answer 2

请检查您是否已导入antd CSS。

 import "antd/dist/antd.css";

.map函数返回后在Tabs中渲染组件

2 个答案: