相关疑难解决方法(0)

我正在构建一个组件库，我需要其中一些组件具有可自定义的标签名称。例如，有时看起来像 a<button>实际上是<a>。所以我希望能够像这样使用按钮组件：

<Button onClick={onClick}>Click me!</Button>
<Button as="a" href="/some-url">Click me!</Button>

理想情况下，我希望根据“as”道具推断可用的道具：

// Throws an error because the default value of "as" is "button",
// which doesn't accept the "href" attribute.
<Button href="/some-url">Click me!<Button>

我们可能还需要传递一个自定义组件：

// Doesn't throw an error because RouterLink has a "to" prop
<Button as={RouterLink} to="/">Click me!</Button>

这是没有 TypeScript 的实现：

function Button({ as = "button", children, ...props }) {
  return React.createElement(as, props, children);
}

那么，如何在传递 props 的同时使用 TypeScript 实现“as”props？

注意：我基本上是在尝试做该styled-components做的事情。但我们正在使用 CSS 模块和 SCSS，所以我无法添加样式组件。不过，我对更简单的替代方案持开放态度。