Question

我是React的新手，正试图了解React-Popper。这是

的一些代码

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

“ ref”，“ style”，“ placement”和“ arrowProps”的值来自哪里，我将如何编辑它们？我知道您可以使用this.props和属性将值传递给Components，但我不知道要插入函数中的值来自何处。

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

您在这里看到的是Client.voice_clients与arrow function和destructuring assignment组合在一起。因此，一个代码示例中有很多内容。

从您的问题来看，我认为最让您感到困惑的是解构任务。因此，以下是一个示例，希望对您有所帮助：

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组件的https://imgur.com/a/BIPxr50。它们都是render props文件中定义的render prop函数的所有参数，您可以在GitHub上找到此软件包。我对这个特定的库不熟悉，但是基本上它们是被传递给该函数的，它们必须在定义时就在那儿，否则会抛出错误。您应该能够计算自己的样式值，但我对这个包不熟悉。

反应（不确定变量来自何处）

2 个答案: