React 中使用 render props

前言

這篇也是紀錄了關於學習 react 的過程，起因是因為開始學習 hooks，但是發現好像有些坑比較重要但卻被我跳過了，像是 render props, HOC 等等。這篇就是來補一下 render props 這部分，本篇也相對簡單，所以不會太長就是紀錄一下而已，不過還是算是比較重要的。

正文

官方文檔是這樣給 render props 解釋的：

术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术

具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。

反正我自己理解能力差所以總之有點不是非常透徹，所以這篇就是講講 render props 以及我自己對這個東西個人白話的理解。

下面開始用一個例子來講。以下組件負責跟蹤 Web 應用中鼠標的位置：

class MouseTracker extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = {
    x: 0, y: 0 };
  }

  handleMouseMove(event) {
   
    this.setState({
   
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
   
    return (
      <div style={
   {
    height: '100vh' }} onMouseMove={
   this.handleMouseMove}>
        <p>Current mouse position ({
   this.state.x}, {
   this.state.y})</p>
      </div>
    );
  }
}

都很簡單，應該都看得懂，反正就是只要你鼠標動到哪就會顯示在 <p> 中。

那如果今天有一個新的需求：我希望有一個圖片，跟著我的鼠標動到哪圖片就也跟到哪，那該怎麼做呢？

其實也很簡單，首先應該會想把跟蹤鼠標這個行為單獨抽出來成一個組件：

class Mouse extends React.Component {
   
  constructor(props) {
   
    super(props);