Какова роль render props в React?

Question

Render props — это паттерн в React, при котором компонент получает функцию для рендеринга через пропсы. Этот подход позволяет передавать динамическую логику и данные между компонентами, обеспечивая гибкость в рендеринге.

YeaHub · Accepted Answer

Паттерн render props позволяет компонентам гибко передавать рендеринг через функцию, переданную в качестве пропса. Это полезно, когда нужно передать динамическую логику или состояние в дочерние компоненты. Например:import React, { useState } from 'react'; function MouseTracker({ render }) { const [position, setPosition] = useState({ x: 0, y: 0 }); const handleMouseMove = (event) => { setPosition({ x: event.clientX, y: event.clientY }); }; return (

{render(position)}

); } function App() { return ( (

Mouse position: {x}, {y}

)}/> ); } export default App;Описание:MouseTracker — это компонент, который отслеживает координаты мыши и передает их в функцию через render проп.Вместо классового компонента используется функциональный компонент с хуком useState для хранения позиции мыши.handleMouseMove обновляет координаты x и y при движении мыши.В компоненте App, через render проп передается функция, которая определяет, как отобразить данные — в данном случае, показывая позицию мыши на экране. Таким образом, функциональный подход с использованием хуков также легко позволяет реализовать паттерн render props, сохраняя логику и гибкость.