Question

我正在使用reactjs ant设计。我想在第一行输入234，在下一行输入followers。如何在标签栏中输入下一行。

我想这样输入 “ 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

您可以将react组件传递给tab组件上的<TabPane />道具（不仅仅是字符串）。

这基本上意味着您可以将JSX标记传递到此道具中-这将使您可以轻松控制标签栏内容的样式和布局。

例如-如果我正确理解了您要达到的目标-您可以执行this：

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

这是根据您提供的示例的working sandbox。

希望这会有所帮助：）

如何在reactjs中的标签栏中下一行

1 个答案: