Rendu des accessoires en réaction pour les composants fonctionnels

Dans React, Render Props est une technique utilisée pour partager la logique entre les composants à l'aide d'un accessoire de fonction. Au lieu d'utiliser des enfants ou une composition, une fonction est passée comme accessoire pour restituer le contenu de manière dynamique. Cette approche fonctionne bien avec les composants fonctionnels et les crochets.

Voici un exemple de la façon d'implémenter des Render Props avec des composants fonctionnels :

Exemple

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 (
    <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
      {render(mousePosition)}
    </div>
  );
};

// Component that consumes the render props
const App = () => {
  return (
    <div>
      <h1>Mouse Tracker</h1>
      <MouseTracker render={({ x, y }) => (
        <h2>Mouse Position: {x}, {y}</h2>
      )}/>
    </div>
  );
};

export default App;

Explication:

• MouseTracker est un composant fonctionnel qui prend un accessoire de rendu.
• Le render prop est une fonction qui reçoit la position de la souris et renvoie JSX.
• Le composant App transmet une fonction comme accessoire de rendu, qui affiche les coordonnées x et y de la souris.

Ce modèle permet plus de flexibilité pour décider comment restituer le contenu en fonction de la logique à l'intérieur du composant MouseTracker.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!