样式化组件 API - withComponent 与 as

Question

我偶然发现了一个关于版本 4 中样式化组件 API 更新的问题：

• withComponent 曾经方便使用，现已弃用
• as 是引入的替代方法

但据我了解，as 用于 JSX 模板级别，而 withComponent 用于样式化组件声明。

那么在以下情况下建议的工作流程是什么：

const BaseComponent = styled.div`
  color: red;
`;

const HeadingComponent = BaseComponent.withComponent('h4');

假设我们在很多不同的地方使用<HeadingComponent />。

这是否意味着不使用第二个样式化组件，而是使用 <BaseComponent as="h4" /> 声明一个 React 组件，而不是重用样式化组件，而是重用 React 组件？

所以将 withComponent 的用法转移到使用具有 as 属性的基本样式组件创建新的 React 组件？

提前致谢，

安德烈亚斯

Answer 1

虽然我个人更喜欢使用 as 属性重用 React 组件，但将用法重构为 BaseComponent.attrs({ as: 'h4' })`` 对您来说可能更容易。