Понимание рендеринга реквизита в ReactJS - PullRequest
Новая
       19

Понимание рендеринга реквизита в ReactJS

0 голосов
/ 01 апреля 2020

Я в основном понимаю, что происходит, но мне неясно, что именно происходит на объектах рендеринга в компоненте MouseTracker. Это то, что я думаю, происходит; поправьте меня, если я не прав:

MouseTracker рендерит компонент Mouse с помощью реквизита рендеринга (состояние), называемого мышью. Отображение реквизита мыши возвращает компонент Cat (который передается реквизиту мыши, который равен mouse (состояние)).

https://reactjs.org/docs/render-props.html

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    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}>

        {/*
          Instead of providing a static representation of what <Mouse> renders,
          use the `render` prop to dynamically determine what to render.
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

1 Ответ

1 голос
/ 01 апреля 2020

Да. Я думаю, что вы правы.

Реквизит рендеринга - это способ создания повторно используемых компонентов, в этом примере вы можете передать любой другой Animal или почти любой другой компонент, который имеет смысл.

Предположим, Вы хотите иметь функцию, чтобы пользователи могли выбирать между некоторыми опциями, какая иконка является желательной для их мыши, трекер является лучшим способом реализовать такую ​​функцию.

...