रिएक्ट में, रेंडर प्रॉप्स एक तकनीक है जिसका उपयोग फ़ंक्शन प्रोप का उपयोग करके घटकों के बीच तर्क साझा करने के लिए किया जाता है। बच्चों या रचना का उपयोग करने के बजाय, सामग्री को गतिशील रूप से प्रस्तुत करने के लिए एक फ़ंक्शन को एक प्रोप के रूप में पारित किया जाता है। यह दृष्टिकोण कार्यात्मक घटकों और हुक के साथ अच्छी तरह से काम करता है।

यहां कार्यात्मक घटकों के साथ रेंडर प्रॉप्स को कार्यान्वित करने का एक उदाहरण दिया गया है:

उदाहरण

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;

स्पष्टीकरण:

• माउसट्रैकर एक कार्यात्मक घटक है जो रेंडर प्रोप लेता है।
• रेंडर प्रोप एक फ़ंक्शन है जो माउस स्थिति प्राप्त करता है और JSX लौटाता है।
• ऐप घटक रेंडर प्रोप के रूप में एक फ़ंक्शन पास करता है, जो माउस के x और y निर्देशांक प्रदर्शित करता है।

यह पैटर्न माउसट्रैकर घटक के अंदर तर्क के आधार पर सामग्री को प्रस्तुत करने के तरीके को तय करने में अधिक लचीलेपन की अनुमति देता है।