傳播 React Props 的令人困惑的語法

Question

const RoundedIcon = ({
  name,
  size,
  color,
  backgroundColor,
}: RoundedIconProps) => {
  return (
    <Box
      height={size}
      width={size}
      justifyContent="center"
      alignItems="center"
      style={{ borderRadius: size / 2 }}
      {...{ backgroundColor }}
    />
  );
};

我了解如何使用擴展運算符以及如何輕松地將其余任何其他道具傳播給 React 孩子，但是有人可以向我解釋為什么這個人要在 RoundedIcon 組件的已經解構的道具“背景顏色”中添加額外的花括號?

Answer 1

在我看來，這沒有意義。 這可能只是這個人做的一個人工制品：

{...{ backgroundColor, name, color }}

然后不再需要名稱或顏色來散布在道具中。 所以離開

{...{ backgroundColor }}

因為它完全一樣：

backgroundColor={backgroundColor}

---

寫完這篇文章后，我意識到打字可能會更快，所以你的代碼中不會有一個凌亂的兩次“背景顏色”。

Answer 2

在您的上述情況下，傳播{...{ backgroundColor }}會將 props 中的backgroundColor傳遞給子組件。 但是如果你想重命名變量，你必須像下面這樣傳播它：

function ComponentA() {
  const backgroundColor = "red";

  return (
    <div>
      <p>Component A</p>
      <ComponentB {...{ helloWorld: backgroundColor }} />
    </div>
  );
}

function ComponentB(props) {
  console.log(props); // { helloWorld: "red" }

  return <div>Component B</div>;
}

Answer 3

我懷疑這{...{ backgroundColor }}是否比backgroundColor={backgroundColor}更好