[05] Render Props


Posted by m6fish on 2021-06-15

Photo by Jongsun Lee on Unsplash

前言

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

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

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

主題

一般來說 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


#Vue #vue-pattern







Related Posts

[css] 如果只有一個 div

[css] 如果只有一個 div

[Day 6] JS in Pipeline (6): CI/CD pipeline (1)

[Day 6] JS in Pipeline (6): CI/CD pipeline (1)

【Day05】Youtube GUI 下載程式

【Day05】Youtube GUI 下載程式


Comments