把托架放在康斯特旁边

Question

我是第一个反应的人，我对一些反应表达没有什么疑问。

我在看视频，学习如何拖放组件。下面的代码可以工作，但我被这些东西弄糊涂了。

1. 为什么const变量bindLogoPos成为div中的一个函数？(第8行第18行)
2. 这段代码中的三个点是什么意思？(我了解到三个点通常指的是数组或物体的其余部分。但我认为bindLogoPos与数组或对象并不完全相关)
3. 像这样使用{...bindLogoPos()}是什么意思？它是否意味着无限地调用函数？这种表达只有在反应中才有可能吗？

import logo from './logo.svg';
import './App.css';
import {useState} from 'react';
import {useDrag} from 'react-use-gesture';

function App() {
  const [logoPos, setLogoPos] = useState({x:0, y:0});
  const bindLogoPos = useDrag((params)=>{
    setLogoPos({
      x: params.offset[0],
      y: params.offset[1]
    });
  });

  return (
    <div className="App">
      <header className="App-header">
        <div {...bindLogoPos()} style={{
          position:'relative',
          top: logoPos.y,
          left: logoPos.x,
        }}>
        <img src={logo} className="App-logo" alt="logo" />
        </div>
////////more...

Answer 1

首先，你要了解反应是如何运作的。

每当内部状态发生变化时，React就会呈现您的组件，因此，当组件的状态发生变化时，将调用bindLogoPos()。因此，它不会被无限地调用，而只是当组件/应用程序的状态发生变化时。

其次，const x = () => {}实际上是一个赋值语句，它将匿名函数赋给一个名为bindLogoPos的变量。函数在JavaScript (！)中是一流的公民，所以它是这样工作的。另外，"const变量bindLogoPos成为div中的函数“的原因是，useDrag实际上将函数本身作为参数，然后返回不同的函数。

接下来，这三个点意味着将函数的结果作为整个props。因此，在您的示例中，它意味着从bindLogoPos获得一个返回值，然后将其作为props分配给HTML元素。将其看作是将整个道具作为唯一的函数参数传递，而不是破坏对象，然后逐个传递。

我希望这回答你的问题，并愉快的编码！

Answer 2

在这里，useDrag是一个定制钩，它似乎是返回一个名为bindLogoPos的函数，当您调用它时，它以json的形式返回div属性。所以：const res = bindLogoPos(); // res is a json containing div attributes，然后这个{...res}被称为毁伤。

所以它如何注入所有必需的属性(比如draggable="true"，style .)