React TS-你能为map()分配默认值吗

Question

我目前有一个组件，它通过数据数组进行映射。我希望能够为某些属性设置默认值。

我当前的Link组件：

const Link: React.FC<ILink> = ({ icons }) => {
return (
<div>
{icons.map(item => (
<a href={item.href} target={item.target} rel={item.rel}>
{/* Some element */}
</a>
))}
</div>
);
};

通常使用TypeScript，我会像这样销毁道具，然后添加我的默认值：

const Link: React.FC<ILink> = ({
href,
target = "_blank",
rel = "noreferrer noopener"
}) => {}

不过，我如何才能为我的地图做到这一点？

Answer 1

您可以在map回调中以相同的方式销毁和分配默认值：

const Link: React.FC<ILink> = ({ icons }) => {
return (
<div>
{icons.map(({ href, target = "_blank", rel = "noreferrer noopener" }) => (
<a href={href} target={target} rel={rel}>
{/* Some element */}
</a>
))}
</div>
);
};

或者，如果只希望传递字符串值，则可以简单地使用或运算符来内联定义回退：

const Link: React.FC<ILink> = ({ icons }) => {
return (
<div>
{icons.map(item => (
<a href={item.href} target={item.target || "_blank"} rel={item.rel || "noopener noreferrer"}>
{/* Some element */}
</a>
))}
</div>
);
};