javascript - 样式化组件 API - withComponent 与 as

Question

我偶然发现了一个关于版本 4 中的 Styled Component 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' }) 可能更容易``。