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]
        }