反应(不确定变量从何而来)

Question

我是新的反应，并试图理解反应-波普。这是一些代码

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

'ref‘、'style’、‘style’和'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

您在这里看到的是一个箭头函数与破坏分配和反应渲染道具相结合。所以在一个代码示例中有很多。

从你的问题中，我认为最让你困惑的是毁灭任务。下面是一个我希望能帮助你们的例子：

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

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

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

这是因为析构赋值将对象的值赋值到变量a和b中，就好像它们是函数参数一样。同样的事情发生在React组件上的props对象上，这就是为什么您没有看到props.ref等等。

Answer 2

它们是Popper组件的渲染道具。它们都是在波普尔文件中定义的呈现支持函数的参数，您可以在这个包的GitHub上找到这些参数。我不熟悉这个特定的库，但是基本上它们被传递给那个函数，并且它们需要在定义的时候出现，否则它会抛出一个错误。您应该能够计算您自己的样式和诸如此类的值，但我还是不太熟悉这个包。