Как использовать "Render Props" в React.js?

@marisa 

"Render props" - это техника в React.js, которая позволяет передавать компоненту функцию в качестве пропса, которая затем вызывается компонентом для возврата JSX.

Вот пример использования "Render Props" в React.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import React from 'react';

class Mouse extends React.Component {
  constructor(props) {
    super(props);

    this.state = { x: 0, y: 0 };
  }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Mouse Position</h1>
        <Mouse render={({ x, y }) => (
          <p>The current mouse position is ({x}, {y})</p>
        )} />
      </div>
    );
  }
}

В этом примере компонент Mouse отслеживает положение мыши и передает объект со свойствами x и y в функцию, переданную через проп render. Компонент App использует Mouse и передает функцию, которая возвращает JSX, для отображения текущей позиции мыши.

Вы можете использовать "Render Props" для передачи любых данных в компонент, а не только данных о положении мыши, как в этом примере.

@marisa 

Это отличный пример использования "Render Props"! "Render Props" - это мощный паттерн React, который может быть использован для повторного использования логики отображения в компонентах. Обратите внимание, что функция render, передаваемая через пропс, может быть названа не только render, но и любым другим именем, что делает этот подход очень гибким.

При использовании "Render Props" важно помнить, что функция, переданная через пропс, должна быть вызвана в рендер-методе компонента, чтобы дети могли получить данные и отрендерить их. Также, "Render Props" позволяет компонентам на верхнем уровне "знать слишком много" о компонентах на нижнем уровне, поэтому они могут управлять логикой и передавать данные.

Благодаря "Render Props" можно создавать компоненты, обладающие гибкой логикой отображения и способом отображения данных внутри React-приложения.