样式化的组件API-withComponent vs. as

Question

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

现已方便使用的
• withComponent已弃用
• as是它的替代选择

但是据我所知，as是在JSX模板级别上使用的，而withComponent是在样式化组件声明中使用的。

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

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

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

假设我们在很多不同的地方使用

这意味着不是使用第二个样式化的组件，而是使用<HeadingComponent />声明一个React组件，而不是重新使用样式化的组件，而是使用React组件？

那么将<BaseComponent as="h4" />的用法转换为使用具有withComponent属性的基本样式的组件来创建新的React组件吗？

预先感谢

安德烈亚斯

Answer 1

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