Photo by Jongsun Lee on Unsplash

前言

Render Props 這個模式跟上一章 renderless 的範例(透過 slot傳遞資料)很像，都是透過 render function 去渲染出頁面，差別在於傳遞父子組件傳遞資料方式不同。

有一個要注意的點是，render props 跟 render function 是兩個不同的東西，第一次看的時候容易搞混，然後資料傳遞就亂了。

另外，render funciton 可以使用 JSX 渲染，也很推薦使用，code會比較容易閱讀。這裡vuePattern的範例好像有點小錯誤，兩個範例都有用 JSX，並非直覺地以為一個有用一個沒。

主題

• vuePattern #Render Props
• 範例程式
• 專案路徑: views/renderProps
• vue官方 - render-function

一般來說 props 是拿來給"父傳子"，向下傳遞資料使用的，不僅可以傳物件也可以傳function。而 Render Props 就跟他的名字一樣，就是用 props 傳一個要拿來渲染頁面的方法。

那既然是 props，名稱當然可以自訂，不一定要取作 render

取作 render 還很容易跟 vue的 render function 搞混...

// mylist.js 子組件
props: {
    myRender: {
        type: Function,
        default: () => {}
    }
},

render (h) {
    // 這裡也可以不產 html, 只呼叫 myRender
    return (<ul>{
        // 這裡選擇傳遞物件給父組件
        this.$props.myRender({
            thisList: this.list
        })
    }</ul>)
}

子組件接收props之後，可以單純的只呼叫 render props (this.$props.myRender)，並把參數丟給給父組件渲染頁面，也可以自己先炫一些東西，像範例中的 ul 。

// index.vue 父組件
<template>
    <div class="main">
        <my-list :my-render="rendList"/>
        <my-list :my-render="rendFilter"/>
    </div>
</template>

rendList ({ thisList }) {
    return (thisList.map((com) => <li>{ com }</li>))
},

父組件丟一個自訂方法 rendList 給子組件，回傳值使用ES6的解構把參數提取出來 & 組成html (JSX)

結尾

以前在建立共用組件的時候，有使用過這個模式，把渲染的工作交給實際引用的父層，好方便的啊! 那時候不曉得這個模式叫做 render props，還為了避免誤會，直接取名叫做 rend，而且自以為發現了好棒棒的應用開心了一陣子。

現在回頭看真是尷尬癌爆發 XD