Как использовать рендер-пропсы в React.js?

@jakayla 

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

Вот пример использования render props:

 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
38
39

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: '100%' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

class App extends React.Component {
  renderMousePosition = (mouse) => {
    return (
      <h1>The mouse position is ({mouse.x}, {mouse.y})</h1>
    );
  }

  render() {
    return (
      <div>
        <Mouse render={this.renderMousePosition} />
      </div>
    );
  }
}

export default App;

Здесь мы создаем два компонента: Mouse и App. Mouse представляет собой обертку для некоторой области, в которой будет отслеживаться движение мыши. App представляет собой родительский компонент, который будет отображать текущую позицию мыши на экране.

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

Таким образом, мы можем легко настраивать компонент Mouse и передавать ему разные функции render для отображения разных элементов на странице.