一直想解决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]
}