react Children 插槽组件 - 项目中遇到的问题

一直想解决react的插槽组件的，这次有机会接触解决这个问题了。
场景是这样的

有一个组件，我想放入两个按钮，但是两个按钮的位置是在组件里面的不同位置的。
我不想把按钮写入到组件里面去，那样方法调用很麻烦

function App() {
const clickOne = () => {
  alert("点击导出按钮");
};
const clickTwo = () => {
  alert("点击导入按钮");
};
  return (
    <div className="App">
      <Contain>
        <Tabs defaultActiveKey="1" onChange={onChange}>
          <TabPane tab="Tab 1" key="1">
            <Box>
             <Button onClick={clickOne}>导出数据</Button>
              <Button onClick={clickTwo}>导入数据</Button>
            </Box>
          </TabPane>
          <TabPane tab="Tab 2" key="2">
            <Box></Box>
          </TabPane>
        </Tabs>
      </Contain>
    </div>
  );
}

Children.count(children) 计算组件的个数

import { Children, useEffect } from "react";
function Contain({ children }) {
  useEffect(() => {
    console.log("Children.count(children)", Children.count(children));
  }, []);
  return (
    <>
      <div>这是容器组件</div>
      {/* {children} */}
      {Children.count(children) > 0 ? children : <div>我是假的组件</div>}
    </>
  );
}

export default Contain;

Children.toArray(children) 属性还是很好用的

import { Tabs } from "antd";
import { Fragment, Children } from "react";
const { TabPane } = Tabs;
function Box({ children, key }) {
  return (
    <Fragment>
      <div tab={`Tab ${key}`} key={key}>
        Content of Tab Pane 1{Children.toArray(children)[0]}
      </div>
      <div>Content of Tab Pane 2 {Children.toArray(children)[1]}</div>
    </Fragment>
  );
}

export default Box;

Children.map()

 <Fragment>
      <div tab={`Tab ${key}`} key={key}>
        Content of Tab Pane 1
        {Children.map(children, (child) => {
          return child;
        })}
      </div>
    </Fragment>

Children.map 和Children.forEach一样的效果，只是方法不同

  {
          Children.map(children, (child) => {
            return child;
          })[0]
        }
        {
          Children.map(children, (child) => {
            return child;
          })[1]
        }