Render Props dalam tindak balas untuk komponen berfungsi

In React, Render Props ialah teknik yang digunakan untuk berkongsi logik antara komponen menggunakan prop fungsi. Daripada menggunakan kanak-kanak atau gubahan, fungsi diluluskan sebagai prop untuk memaparkan kandungan secara dinamik. Pendekatan ini berfungsi dengan baik dengan komponen dan cangkuk berfungsi.

Berikut ialah contoh cara melaksanakan Render Props dengan komponen berfungsi:

Contoh

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;

Penjelasan:

• MouseTracker ialah komponen berfungsi yang mengambil prop render.
• Prop render ialah fungsi yang menerima kedudukan tetikus dan mengembalikan JSX.
• Komponen Apl melepasi fungsi sebagai prop pemaparan, yang memaparkan koordinat x dan y tetikus.

Corak ini membolehkan lebih fleksibiliti dalam memutuskan cara untuk memaparkan kandungan berdasarkan logik dalam komponen MouseTracker.

Atas ialah kandungan terperinci Render Props dalam tindak balas untuk komponen berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!