react 能实现插槽传参么

Question

类似于vue 中
插槽 <slot name="aa" index="1">
使用
<div v-slot:aa="data" >{{data.index}}</div>
可以拿到 index的值

react 中props.children可以实现么

Answer 1

1、cloneElement

<>
  {
    // children 不是数组我们需要用 React.Children.map 来遍历
    // 或者把它转成数组
    React.Children.map(children, (child) => {
      if (!React.isValidElement(child)) {
        return null
      }
      // 这里我们通常还会判断 child 的类型来确定是不是要传递相应的数据，这里我就不做了
      const childProps = {
        ...child.props,
        a: 1, // 其他的一些参数
      }
      return React.cloneElement(child, childProps)
    })
  }
</>

2、renderProps/renderCallback

// Parent
<>
  {children(xxx)}
</>
// Use
<Parent>
  {(xxx) => <Child a={xxx} /> }
</Parent>

3、Context或者其他状态管理工具

Answer 2

可以使用你说的props.children
也可以自定定义一个参数类型为ReactNode然后再组件内直接放到你想要放到的位置就好来了