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

您可以在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>
  );
};

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

Rdata

React TS-您可以将默认值分配给map（）吗？

1 个答案: