javascript - 在扩展样式组件上使用 'as' 样式组件 Prop 时丢失组件 Prop

Question

我像这样写了一个 CallToAction 组件:

const CallToAction = ({ text = "Default text" }) => (
  <S_CallToAction>{text}</S_CallToAction>
)
const S_CallToAction = styled.div`
  // Some styles...
`
export default CallToAction

然后，当我想在另一个组件中使用它并用更多样式重载它时，我正在丢失我的“文本” Prop 和以前的样式我在我的“CallToAction”组件中声明。当我删除“as={'button'}” Prop 时，这很有效。

这是我想在另一个组件中重载它时所做的:

import CallToAction from "components/common/callToAction"

...

        <S_ProductButton
          as={'button'}
          text={`I want my text to display and my style being inherited`}
        />

...

const S_ProductButton = styled(CallToAction)`
      width: 50%;
      margin: auto;
      min-width: 300px;
`

有人能解释一下为什么添加“as”属性会使我的样式重载并且我的文本属性不再起作用吗？还有，你是怎么处理这种情况的？

注意:我是样式组件的新手...我可以导出“S_CallToAction”(仅限样式)并在我的其他组件中使用它，但这是一个好的解决方案吗？这对我来说会打破“一个组件 = 一种样式”的想法，这就是 styled-components 背后的想法......

Answer 1

好的，我终于找到了解决问题的方法!我的用例还有另一个 Prop “forwardedAs”，就像“as” Prop 一样使用，这使我的重载样式组件按预期工作。

我必须通过我的 CallToAction 组件(最初是一个 styled.a)上的 {...props} 传播所有 Prop

const CallToAction = ({ text = "Text", href, ...props}) => (
  <S_CallToAction href={href ? href : null} {...props}>{text}</S_CallToAction>
)

然后在我的扩展组件上，我必须使用 forwardedAs:

           <S_ProductButton
              forwardedAs={'button'}
              text={`I have my text and my styles inherited`}
            /> 

这里是关于我遇到的问题的详细信息，以及为什么样式组件会这样: https://github.com/styled-components/styled-components/issues/1981