如何將 redux 道具傳遞給 React typescript 中的樣式化組件

Question

我是 typescript 的新手，有些事情我不太清楚。 我正在嘗試將道具傳遞給樣式組件文件，道具使用選擇器從 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道具，但在 function 中引用了一個isActive道具。

• isActive顏色有錯別字，尾隨空格"green " 。

• 沒有title屬性傳遞給StyledButton組件，所以props.title在 function 中未定義。

   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>

Answer 2

將道具名稱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};
`