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” 列表中，可以直接放置到元素的內部