Render Props （ Day20 ）

「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