في React، Render Props هي تقنية تستخدم لمشاركة المنطق بين المكونات باستخدام خاصية دالة. بدلاً من استخدام الأطفال أو التركيب، يتم تمرير وظيفة كدعم لعرض المحتوى ديناميكيًا. يعمل هذا الأسلوب بشكل جيد مع المكونات الوظيفية والخطافات.

إليك مثال لكيفية تنفيذ 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.
• يقوم مكون التطبيق بتمرير وظيفة باعتبارها خاصية العرض، والتي تعرض إحداثيات الماوس x وy.

يسمح هذا النمط بمزيد من المرونة في تحديد كيفية عرض المحتوى بناءً على المنطق داخل مكون MouseTracker.