Render Props

自 1.3.5 起支持

render props 是指一種在 Taro 組件之間使用一個值為函數(shù)的 prop 共享代碼的簡單技術。

具有 render prop 的組件接受一個函數(shù)，該函數(shù)返回一個 Taro 元素并調用它而不是實現(xiàn)自己的渲染邏輯。

舉個例子，假設我們有一個組件，它可以呈現(xiàn)一張在屏幕上追逐鼠標的貓的圖片。我們或許會使用 <Cat mouse={{ x, y }} prop 來告訴組件鼠標的坐標以讓它知道圖片應該在屏幕哪個位置。

我們可以提供一個帶有函數(shù) prop 的 <Mouse> 組件，它能夠動態(tài)決定什么需要渲染的，而不是將 <Cat> 硬編碼到 <Mouse> 組件里，并有效地改變它的渲染結果。

// cat.js
import catImage from './cat.jpg'
class Cat extends Taro.Component {
  static defaultProps = {
    mouse: {
      x: 0,
      y: 0
    }
  }

  render() {
    const { mouse } = this.props;
    return (
      <Image src={catImage} style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

// mouse.js
class Mouse extends Taro.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleClick.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleClick(event) {
    const { x, y }  = event.detail
    this.setState({
      x,
      y
    });
  }

  render() {
    return (
      <View style={{ height: '100%' }} onClick={this.handleClick}>

        {/*
          我們可以把 prop 當成一個函數(shù)，動態(tài)地調整渲染內容。
        */}
        {this.props.renderCat(this.state)}
      </View>
    );
  }
}

// MouseTracker.js
class MouseTracker extends Taro.Component {
  render() {
    return (
      <View>
        <View>點擊鼠標!</View>
        {/*
          Mouse 如何渲染由 MouseTracker 的狀態(tài)控制
        */}
        <Mouse renderCat={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </View>
    );
  }
}

現(xiàn)在，我們提供了一個 render 方法 讓 <Mouse> 能夠動態(tài)決定什么需要渲染，而不是克隆 <Mouse> 組件然后硬編碼來解決特定的用例。

更具體地說，render prop 是一個用于告知組件需要渲染什么內容的函數(shù) prop。

這項技術使我們共享行為非常容易。要獲得這個行為，只要渲染一個帶有 render prop 的 <Mouse> 組件就能夠告訴它當前鼠標坐標 (x, y) 要渲染什么。

注意事項

render props 是基于小程序 slot 機制實現(xiàn)的。 因此它受到的限制和 children 與組合的限制一樣多