「render prop」這個詞指的是一種用一個其值為函式的 prop 來在 React component 之間共享程式碼的技巧。

render props 很像製造一個環境，會結合特定功能並產出賦予特定功能的元件。在 React render props 文件中提供了一個抓取滑鼠值的 mouse 元件，將傳入的 cat 隨滑鼠位移。

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        //抓取位置的 Mouse 環境
        <Mouse render={mouse => (
          //要顯示的 cat ，會再傳入 mouse 抓到的 mouse position 值
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

以 Hook 的改寫

寫 Render Props 大概就是要寫一個通用的函示，然後提供資料跟定好介面，好讓傳遞出來要 render 的元件可以收到資料。以下改寫結果：

1. 建構一個通用函示 Mouse，並使用 useState 定好滑鼠資料跟存取資料的函式
2. props 傳遞要顯示的 component 進入，並結合 props.render 將元件與抓取的資料渲染出結果。

function Mouse(props) {
  const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 });
  
  const handleMouseMove = () => {
    setMousePosition({
      x: event.clientX,
      y: event.clientY
    });
  }

  return (
    <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
        {props.render(mousePosition)}
      </div>
  )
}

function MouseTracker () {
  return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
}

function Cat (props) {
  const mouse = props.mouse;
    return (
      <img src="https://static-s.aa-cdn.net/img/ios/1400324825/6d34f2daf4445d9267229e63a059a858?v=1" style={{ position: 'absolute', left: mouse.x, top: mouse.y, transform: 'translate(-50%, -50%)' }} />
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MouseTracker />, rootElement);

Codepen 測試

以上今天。

參考資料：
https://zh-hant.reactjs.org/docs/render-props.html