javascript - 如何将 forwardedAs prop 与样式组件一起使用？将 forwardedAs Prop 与 typescript 一起使用

Question

这是关于 forwardedAs 属性的文档:https://styled-components.com/docs/api#forwardedas-prop .

如您所见，它不是很详细，也没有说明如何正确使用此 Prop 。

我的问题是:如何访问通过forwardedAs 发送的 Prop ？我如何为这些 forwardedAs 属性定义类型？

我可以通过 ...rest 参数访问 forwardedAs Prop ，但我需要为这些 Prop 定义类型，因为我也在使用 styled-components使用 typescript 。

这是我的代码示例:

// Button.jsx
const myPropsToForward = {
  href: 'https://somewebsite.com',
  // ...more props
}

const Button = styled.button`
  // ...button styles
`

const myComponent = () => (
  <Button
    as={Link}
    to={ctaLink}
    forwardedAs={myPropsToForward}
  />
)

// Link.jsx
const Link = ({
  forwardedAs,
  ...rest
}) => {
  // How do I access the forwardedAs prop from <Button /> here?

  return (
    <a href={forwardAs?.href} {...rest} />
  )
}

在这里，我需要能够访问通过 forwardedAs prop 发送的 Link 组件中的 props，但是没有关于如何做到这一点的文档。如果我可以访问 forwardedAs 属性，我就可以为 Link 组件定义适当的类型。我不想依赖 ...rest 参数，因为我无法为其定义类型。

提前谢谢你。

Answer 1

转发为

forwardedAs prop 不是用来传递 Prop 的。它实际上是为了传递 as支持链中的下一个项目。考虑这个例子:

const Button = styled.button`
  padding: 20px;
`;

const Link = (props: any) => { // not properly typed
  return <Button {...props} />;
};

const MyLink = styled(Link)`
  background-color: blue;
`

const MyComponent = () => (
  <MyLink forwardedAs={"div"}>
    Text
  </MyLink>
);

我们有一个 Button这是一个样式化的组件，我们有一个 MyLink这是另一个样式化的组件，它将其属性传递给 Button .如果我们想设置as支持 Button , 我们可以设置 forwardedAs在 MyLink .

与 <MyLink forwardedAs={"div"}> ，我们最终呈现给 DOM 的元素是一个 div而不是 button并且它应用来自 styled 的样式HOC。

传递 Prop

根据此处的示例，Link实际上不需要组件。你可以设置as="a"在你的 Button将其呈现为链接并通过 myPropsToForward直接。

const myPropsToForward = {
  href: "https://somewebsite.com"
  // ...more props
};

const Button = styled.button`
  background: yellow;
  padding: 20px;
`;

const MyComponent = () => (
  <Button as="a" {...myPropsToForward}>
    Text
  </Button>
);