react - props用法扩展
模拟vue中的插槽
简单实用函数组件模拟插槽,和具名插槽
const Child = ({children}) => {
return(
<div>
{/* 具名插槽实现 , 对应元素的具体使用*/}
<div> {children.find(itm => itm.props.name === 'header')}</ div>
<h3>具名插槽</ h3>
<div>{ children.find(itm => itm.props.name === 'footer')}</ div>
<hr />
{/* 直接将拿到的数据全部展示*/}
<h3>简单插槽</ h3>
<div>{children}</ div>
</ div>
)
}
const Farther = () => {
return (
<div>
<h3>父组件</ h3>
{/*
1, 子组件中的元素,可以通过props.children获取, 可以直接结构
2, 如果只有一个元素,返回的是一个对象,如果有多个元素返回的就是一个对象数组
*/}
<Child>
<div name="header">我是头</ div>
<div name="footer">我是尾</ div>
</ Child>
</ div>
)
}
模拟作用域插槽
理解作用域插槽: 实现组件间数据传递和内容复用的技术 , 他允许父组件在子组件模版中自定义内容,同时还可以在访问到子组件时, 提供数据给父组件
const AppChildren = ({ children }) => {
const name = '迂幵'
// 使用内置方法判断当前的children属性是对象还是数组,写法上都是以数组方式些
const childs = React.Children.map(children, (child) => {
// 在使用内置方法,克隆一个属于自己的组件
return React.cloneElement(child, {
onClick: () => {
// 调用的是父组件中的子组件插槽传过来的点击事件 , 并将当前子组件中的数据,传入到父的子模版中
child.props.onClick(name)
}
})
})
return (
<div>
<div>子组件</div>
<hr />
{childs}
</div>
);
}
const AppFarther = () => {
const clickHandler = (name) => {
console.log('2222' , name)
}
return (
<div>
<h3 >我是父组件</h3>
<AppChildren>
<div onClick={clickHandler}>点我,快点我</div>
</AppChildren>
</div>
);
}