在 React 中，Render Props 是一種使用 function prop 在元件之間共享邏輯的技術。不使用子項或組合，而是將函數作為 prop 傳遞以動態呈現內容。這種方法適用於功能組件和鉤子。

以下是如何使用功能元件實作 Render Props 的範例：

例子

import React, { useState } from 'react';

// The component using render props
const MouseTracker = ({ render }) => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  };

  return (
    

      {render(mousePosition)}
    
  );
};

// Component that consumes the render props
const App = () => {
  return (
    

      
Mouse Tracker
       (
        
Mouse Position: {x}, {y}
      )}/>
    
  );
};

export default App;

解釋：

• MouseTracker 是一個需要渲染屬性的功能元件。
• render prop 是一個接收滑鼠位置並傳回 JSX 的函數。
• App 元件傳遞一個函數作為 render prop，它顯示滑鼠的 x 和 y 座標。

此模式可以更靈活地決定如何根據 MouseTracker 元件內部的邏輯呈現內容。