react 插槽传参

react中其实没法直接给插槽传递参数，只能借助一点技术手段：函数。

这种方式有个专有名词叫：render-props。

render-props的具体的方式就是，子组件作为插槽是用函数的形式，而容器组件渲染的时候对应的就调用这个函数，在调用函数的时候，把需要传递的参数传入函数，这样在插槽函数的作用域内就拿到了数据：

() => {
  return ( 
    <MainComp>
      {
        (data) => (<Staff staff={data} />)
      } 
    </MainComp>
  )
}

看下容器MainComp组件：

const MainComp = (props) => {

  const [data, setData] = useState({})
  useEffect(() => {
    const info = await getData()
    setData(info)
  }, []) 
  return (
    <div>
      {
        props.children && props.children(data)
      }
    </div>
  )
}

当然了，这种函数形式的“插槽”不止可以用作插槽，用在普通的props上自然也是可以的。在react世界里，凡是要从另一个组件拿数据的场合，都可以考虑传个函数：

() => {
  return (
    <MainComp
      staff={(data) => (<Staff staff={data} />)}
    />
  )
}

对应的MainComp，最终也是通过函数调用给子组件传递参数，只是获取子组件的方式换一下：

const MainComp = (props) => {
  const [data, setData] = useState({})
  useEffect(() => {
    const info = await getData()
    setData(info)
  }, []) 
  return (
    <div>
      {/* 这里变一下 */}
      {
        props.staff && props.staff(data)
      }
    </div>
  )
}