Реагировать (не уверен, откуда берется переменная)

Question

Я новичок в React и пытаюсь понять React-Popper. Это некоторый код из

https://www.npmjs.com/package/react-popper

Откуда берутся значения для 'ref', 'style', 'location' и 'arrowProps' и как мне их редактировать? Я понимаю, что вы можете использовать this.props и атрибуты для передачи значений в Компоненты, но я не понимаю, откуда поступают значения, которые будут вставлены в функцию.

import { Manager, Reference, Popper } from 'react-popper';

const Example = () => (
  <Manager>
    <Reference>
      {({ ref }) => (
        <button type="button" ref={ref}>
          Reference element
        </button>
      )}
    </Reference>
    <Popper placement="right">
      {({ ref, style, placement, arrowProps }) => (
        <div ref={ref} style={style} data-placement={placement}>
          Popper element
          <div ref={arrowProps.ref} style={arrowProps.style} />
        </div>
      )}
    </Popper>
  </Manager>
);

Answer 1

То, что вы видите здесь, - это функция стрелки, которая сочетается с назначением деструктуры и React Render Props. Так что это много в одном примере кода.

От твоего вопроса, я думаю, что больше всего тебя смущает, так это деструктурирующее задание. Вот пример, который, я надеюсь, поможет вам:

var foo = ({a, b}) => a + b;

var x = {
  a: 1,
  b: 2
};

console.log(foo(x));
# Output is 3

Это связано с тем, что деструктурирующее присваивание присваивает значения из объекта переменным a а также b как будто они были параметрами функции. То же самое происходит с props объект на компонентах React, и поэтому вы не видите props.ref, так далее.

Answer 2

Это реквизит для компонента Popper. Все они являются параметрами функции рендеринга, определенной в файле Popper, который вы можете найти на GitHub для этого пакета. Я не знаком с этой конкретной библиотекой, но в основном они передаются этой функции, и они должны быть там, как она определена, иначе она выдаст ошибку. Вы должны быть в состоянии вычислить свои собственные значения для стилей и еще много чего, но опять же, я не знаком с этим пакетом.