react-插槽模拟

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>
  );
}