antd TabPane怎么换行

在antd中，TabPane的换行可以通过设置CSS样式来实现。可以在TabPane的父元素上设置white-space: pre-wrap;属性，这样就可以实现在同一个td里换行显示。如果在第一个标签页中可以正常显示，但在其他标签页中不显示，可能是因为在切换标签页时，没有重新渲染表格，可以通过在TabPane的父元素上设置key属性，并在切换标签页时改变key的值来实现重新渲染表格的效果。具体实现方法如下所示：

import React, { Component } from 'react';
import { Tabs } from 'antd';

const { TabPane } = Tabs;

class MyTabs extends Component {
  state = {
    activeKey: '1',
  };

  handleTab = (key) => {
    this.setState({
      activeKey: key,
    });
  };

  render() {
    const { activeKey } = this.state;
    const data = [
      {
        name: '张三',
        age: 18,
        time: ['2000-01-01,2001-01-01', '2002-01-01,2003-01-01'],
      },
      {
        name: '李四',
        age: 20,
        time: ['2004-01-01,2005-01-01', '2006-01-01,2007-01-01'],
      },
      {
        name: '王五',
        age: 22,
        time: ['2008-01-01,2009-01-01', '2010-01-01,2011-01-01'],
      },
    ];

    return (
      <Tabs
        defaultActiveKey="1"
        activeKey={activeKey}
        onChange={this.handleTab}
        className="tab-wrap"
      >
        <TabPane tab="标签页1" key="1">
          <table>
            <thead>
              <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>早起时间</th>
              </tr>
            </thead>
            <tbody>
              {data.map((item, index) => (
                <tr key={index}>
                  <td>{item.name}</td>
                  <td>{item.age}</td>
                  <td style={{ whiteSpace: 'pre-wrap' }}>{item.time.join('\n')}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </TabPane>
        <TabPane tab="标签页2" key="2">
          <table>
            <thead>
              <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>早起时间</th>
              </tr>
            </thead>
            <tbody>
              {data.map((item, index) => (
                <tr key={index}>
                  <td>{item.name}</td>
                  <td>{item.age}</td>
                  <td style={{ whiteSpace: 'pre-wrap' }}>{item.time.join('\n')}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </TabPane>
        <TabPane tab="标签页3" key="3">
          <table>
            <thead>
              <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>早起时间</th>
              </tr>
            </thead>
            <tbody>
              {data.map((item, index) => (
                <tr key={index}>
                  <td>{item.name}</td>
                  <td>{item.age}</td>
                  <td style={{ whiteSpace: 'pre-wrap' }}>{item.time.join('\n')}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </TabPane>
      </Tabs>
    );
  }
}

export default MyTabs;