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

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

0 голосов
/ 06 мая 2019

Я новичок в 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>
);

Ответы [ 2 ]

1 голос
/ 06 мая 2019

Здесь вы видите функцию стрелки в сочетании с деструктурирующим назначением и 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 и т. Д.

0 голосов
/ 06 мая 2019

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

...