时间戳

首页 > 解决方案 > React TS - 你可以为 map() 分配默认值吗？

reactjs - React TS - 你可以为 map() 分配默认值吗？

问题描述

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

我当前的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"
}) => {}

我怎样才能为我的地图做到这一点？

标签： reactjstypescript

解决方案

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

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

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>
  );
};

推荐阅读