React（不确定变量来自哪里）

Question

我是 React 新手，正在尝试了解 React-Popper。这是来自

的一些代码

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

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

它们是 render props for the Popper component. They are all parameters of the render prop function defined in the Popper 文件，您可以在 GitHub 上找到此包的文件。我不熟悉这个特定的库，但基本上它们被传递给那个函数，并且它们需要按照它的定义存在，否则会抛出错误。您应该能够计算自己的样式值等等，但我还是不熟悉这个包。

Answer 2

您在这里看到的是 arrow function being combined with destructuring assignment and React Render Props。所以在一个代码示例中有很多。

从你的问题来看，我认为你最困惑的是解构赋值。下面是一个示例，希望对您有所帮助：

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 等

React（不确定变量来自哪里）

React (not sure where a variable comes from)

reactjs

react-popper