Vue slot VS React render Props、children props

vue 的 slot 回顾

插槽基本用法：

例子：组件 base-layout 提供3个插槽（header、默认、footer）：

使用组件 base-layout 的地方，自定义插槽的内容：

    

 

插槽传递属性（插槽内容能够访问子组件中才有的数据）

默认插槽传递属性， current-user 组件提供默认插槽，并且将user对象传递给父组件：

使用 current-user 组件的地方：

         

具名插槽传递属性：

插槽解构：

1. 基本用法：

2. 将 user 重命名为 person：

 

3. 定义默认内容，用于插槽 prop 是 undefined 的情形：

 动态插槽：

也可以这样写：

具名插槽缩写：

  

react 有vue插槽功能的用法：

1. 函数作为子元素，传递给子组件，props.children 可以传递任意类型的数据：

下面例子中，index 就是子组件传递给父组件的数据，父组件决定显示在组件某一处显示什么, 和vue的slot不一样的是 他是函数返回显示，slot直接是标签或者组件了

 

 2. render props  使用场景就是有一个组件，它有一种状态（state），这种状态可以使用在不同的组件上，别的组件并不关心该状态是如何变更的，就可以使用render props； 

总的来说就是组件封装了状态相关的逻辑，接收一个render函数，调用的地方通过render函数返回动态的组件，返回的组件插入到某个地方；

具体例子：

个性组件：

公共组件：

如何使用：

其他说明：

• • 上面其实也可以使用children prop（意思就是render 属性变为 children ，原理一样），
  • 不过children prop 并不真正需要添加到 JSX 元素的 “attributes” 列表中，可以直接放置到元素的内部