React では、Render Props は、関数 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 は、レンダリング プロパティを受け取る機能コンポーネントです。
• レンダープロップはマウス位置を受け取ってJSXを返す関数です。
• App コンポーネントは、マウスの x 座標と y 座標を表示する関数をレンダリング プロップとして渡します。

このパターンにより、MouseTracker コンポーネント内のロジックに基づいてコンテンツをレンダリングする方法をより柔軟に決定できます。