如何将 redux props 传递给 react typescript 中的样式化组件

Question

我对打字稿还很陌生，有些事情我不是很清楚。我正在尝试将道具传递给样式组件文件，道具使用选择器从 redux 到达，但似乎不起作用，我无法在样式组件中记录值导致语法错误。到目前为止，这是我的代码：

type ButtonProps = {
  title: string
  reducerName: string
  flowName: string
  actionType: string
  disabled: boolean
  route?: string
  customAction?: string
  id?: number
  active?: string
  isActiveBtn?: any
  isActive?: string
  onClick: () => void
} & StyledButtonProps

const MyButton: React.FC<ButtonProps> = ({
  id,
  title,
  customAction,
  actionType,
  reducerName,
  flowName,
  route,
  ...rest
}) => {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  const isActive = useSelector(selectType)
  const [active, setActive] = useState('')

  const onClick = useCallback(() => {
    setActive(title)
    dispatch(
      createAction<ButtonActionPayload>(customAction || actionType)({
        id,
        title,
        flowName,
        reducerName
      })
    )
    route && navigate(`${route}`)
  }, [
    dispatch,
    customAction,
    actionType,
    title,
    reducerName,
    flowName,
    route,
    navigate,
    id
  ])
  return (
    <StyledButton isActiveBtn={isActive} {...rest} onClick={onClick}>
      {title}
    </StyledButton>
  )
}
export default MyButton

这里是带样式的组件：

import { Button } from 'antd'
import styled from 'styled-components'
import styledMap from 'styled-map'

export type StyledButtonProps = {
  borderColor: string
  borderType: string
  buttonColor: string
  buttonBgColor: string
  margin: string
  paddingRight: string
  paddingLeft: string
  variant: string
  isActive?: string
}

export const StyledButton = styled(Button)<StyledButtonProps>`
  background-color: ${(props) =>
    props.isActive === props.title ? 'green ' : buttonBgColor};
`

我在传递 isActive 道具时做错了什么？以及为什么我不能这样做：

background-color: ${(props) => console.log(props)};

提前感谢任何提示

Answer 1

将道具名称isActiveBtn={isActive}更改为isActive={isActive}
或
如果您希望道具名称为 isActiveBtn，请将所有样式组件 isActive 的值固定为 isActiveBtn.

import { Button } from 'antd'
import styled from 'styled-components'
import styledMap from 'styled-map'

export type StyledButtonProps = {
  borderColor: string
  borderType: string
  buttonColor: string
  buttonBgColor: string
  margin: string
  paddingRight: string
  paddingLeft: string
  variant: string
  isActiveBtn?: string
}

export const StyledButton = styled(Button)<StyledButtonProps>`
  background-color: ${(props) =>
    props.isActiveBtn === props.title ? 'green ' : buttonBgColor};
`

Answer 2

据我所知，道具正在顺利通过。不过我确实看到了一些差异。

问题

传递了一个isActiveBtn prop，但是在函数中引用了一个isActive prop。
isActive 颜色有错别字，尾部有 space "green ".

没有 title prop 传递给 StyledButton 组件，所以 props.title 在函数中未定义。

export const StyledButton = styled(Button)<StyledButtonProps>`
  background-color: ${(props) =>
    props.isActive === props.title
      ? 'green '
      : buttonBgColor
  };
`;

...

<StyledButton
  isActiveBtn={isActive}
  {...rest}
  onClick={onClick}
>
  {title}
</StyledButton>

解决方案

将 isActive 和 title 属性传递给样式按钮并修复颜色字符串值。

const StyledButton = styled(Button)<StyledButtonProps>`
  background-color: ${(props: any) => {
    console.log({ props });
    return props.isActive === props.title ? "green" : buttonBgColor;
  }};
`;

...

<StyledButton isActive={isActive} onClick={onClick} title={title}>
  {title}
</StyledButton>

如何将 redux props 传递给 react typescript 中的样式化组件

How to pass redux props to styled component in react typescript

javascript

typescript

reactjs

styled-components

问题

解决方案