render props的運用

2020-04-03

render props的運用

術語 “render prop” 是指一種在 React 組件之間使用一個值為函數的 prop 共享代碼的簡單技術

通常的 這個值為函數的prop 擁有相同的一些參數和邏輯

例如 我們有一個 toggle button 點擊按鈕時顯示當前一些特殊內容 這個功能在許多組件中都要用到

普通情況下 如果我們不做處理 可能需要在每個組件里寫如下一段代碼

 

import React, { Component } from 'react'

export default class Toggle extends Component {
    state = {
        on:false,
    }

    toggle = () => {
        this.setState({
            on:!this.state.on
        })
    }
  render() {
    return (
      <div className={toggleStyle}>
      {
          this.state.on && (
            <h1>我是藍胖</h1>        
          )
      }
        <button onClick={this.toggle}>顯示/隱藏</button>
      </div>
    )
  }
}

const toggleStyle = {
    background:"red"
}

 

這是一段簡單的邏輯和功能 區別是 每個組件要渲染的內容都不一樣 

如果有這種需求 render props 是非常合適的

首先 寫一個組件

調用這個組件的時候 傳入一個render 方法 接受3個參數 返回一段jsx

在組件中 執行傳入的render方法 並傳入需要的參數

 

頁面上顯示了我們指定的內容

 

同樣的我們再寫一個組件 在Toggle1中也傳入 一個叫propChild的方法 這個方法跟上一個組件的render一模一樣

所以render props其實只是一個叫法 它其實指的是這一類的prop 你可以改成任何名字 不一定非要叫render

 

第二個組件中 傳入不一樣的參數

 

 

 

可以看到 我們可以用render props 進行代碼復用