如何在reactjs的tabbar中下一行

Question

我正在使用reactjs蚂蚁设计。我想在第一行输入234，在下一行输入followers.how到标签栏中的下一行。

我想输入这样的“333粉丝”

import { Tabs } from 'antd';

const TabPane = Tabs.TabPane;

function callback(key) {
  console.log(key);
}

ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>,
  mountNode);

Answer 1

您可以将反应组件传递到tab组件上的<TabPane /> prop（不仅仅是字符串）。

这基本上意味着您可以将JSX标记传递到此prop中 - 这将允许您轻松控制选项卡栏内容的样式和布局。

例如 - 如果我正确理解你想要实现的目标 - 你可以做qazxsw poi：

this

这是基于您提供的示例的

 <TabPane
      tab={
            <div>
              <div>234</div>
              <div>Followers</div>
            </div>
         }
          key="1"
        >
          Content of Tab Pane 1
        </TabPane>

。

希望这可以帮助 ：）