기능적 구성요소에 대한 반응의 렌더 소품

React에서 Render Props는 function 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 (
    <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;

설명:

• MouseTracker는 렌더 소품을 사용하는 기능적 구성 요소입니다.
• render prop은 마우스 위치를 받아 JSX를 반환하는 함수입니다.
• App 구성 요소는 마우스의 x 및 y 좌표를 표시하는 함수를 render prop으로 전달합니다.

이 패턴을 사용하면 MouseTracker 구성 요소 내부 논리를 기반으로 콘텐츠를 렌더링하는 방법을 더 유연하게 결정할 수 있습니다.

위 내용은 기능적 구성요소에 대한 반응의 렌더 소품의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!