Question

关于SO上的此错误，有几个问题，但类似情况下的任何人都没有，而且我找到的解决方案都没有，所以我要提出一个具体问题。

在另一个组件中使用样式化组件并将其传递给道具时，我是否必须创建一个新类型来将道具传递给样式化组件，还是有某种方法可以使用现有的样式化组件类型？

这是我的代码。似乎是 as =“” 属性，它给出了上面的错误。我认为这与以下事实有关：我的组件仅使用道具，因此它可以将其传递给样式化组件，因为它是样式化组件的支持者。

import React from 'react'
import styled from 'styled-components'

type Props = {
    additionalClass?: string,
    as?: string
}

const Component: React.FC<Props> = (props) => {

    return (

        <StyledComponent as={props.as} className={props.additionalClass}>
            {props.children}
        </StyledComponent>

    )

}


export default Component


const StyledComponent = styled.div`    
    ...styles go here
`

Answer 1

问题是我试图将“ as”属性传递给样式化组件，并且我认为它必须是字符串，所以我这样做了……

type Props = {
    className?: string,
    as?: string
}

问题在于，一旦将其传递给样式组件，它就希望它成为元素的名称。我在Github上找到了答案，这可能是两种不同的事物之一。这行得通...

type Props = {
    className?: string,
    as?: React.ElementType | keyof JSX.IntrinsicElements
}

Answer 2

创建 styled.div

时，您只需要验证道具即可

示例

const Menu= styled.div<{ menuOpen: boolean }>`
  ${({ menuOpen }) => {
    if (menuOpen) {
      return 'background-color: white';
    }

    return 'background-color: black';
  }}
`;

export const Component: React.FC = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  return(
    <Menu menuOpen={menuOpen}>
      whatever content
    </Menu>
  )
}

使用优式样式的组件时，没有重载与此调用匹配

2 个答案: