const RoundedIcon = ({
name,
size,
color,
backgroundColor,
}: RoundedIconProps) => {
return (
<Box
height={size}
width={size}
justifyContent="center"
alignItems="center"
style={{ borderRadius: size / 2 }}
{...{ backgroundColor }}
/>
);
};
我了解如何使用擴展運算子以及如何輕松地將其余任何其他道具傳播給 React 孩子，但是有人可以向我解釋為什么這個人要在 RoundedIcon 組件的已經解構的道具“背景顏色”中添加額外的花括號?
uj5u.com熱心網友回復：
在我看來，這沒有意義。這可能只是這個人做的一個人工制品：
{...{ backgroundColor, name, color }}
然后不再需要名稱或顏色來散布在道具中。所以離開
{...{ backgroundColor }}
因為它完全一樣：
backgroundColor={backgroundColor}
寫完這篇文章后，我意識到打字可能會更快，所以你的代碼中不會有一個凌亂的兩次“背景顏色”。
uj5u.com熱心網友回復：
在您的情況下，上述傳播{...{ backgroundColor }}會將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>;
}
uj5u.com熱心網友回復：
我懷疑有什么理由比這{...{ backgroundColor }}更好 backgroundColor={backgroundColor}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480973.html
標籤：javascript 反应