有條件地傳播道具並獲得有關道具丟失的 TS 錯誤

Question

我正在嘗試有條件地傳播一些道具，但出現錯誤

類型 '{ activeStyles: { [key: string]: string; }; onClick：（）=>無效； 文本：字符串； } | { inactiveStyles: { [key: string]: string; }; onClick：（）=>無效； 文本：字符串； }' 不可分配給類型 'IntrinsicAttributes & BtnProps'。 類型 '{ activeStyles: { [key: string]: string; }; onClick：（）=>無效； 文本：字符串； }' 缺少“BtnProps”類型的以下屬性：bg、顏色

這是我的組件：

interface BtnProps {
  bg: string
  text: string
  color: string
  onClick: () => void
}

export const Toggle: React.FC = (): JSX.Element => {
  const [btnClicked, setBtnClicked] = useState(true)

  const MyBtn = ({ text, bg, color, onClick }: BtnProps) => {
    return <Button {...{ bg, color, onClick, size: 'sm' }}>{text}</Button>
  }

  const activeStyles: { [key: string]: string } = { color: 'white', bg: 'blue.500' }
  const inactiveStyles: { [key: string]: string } = { color: 'blue.500', bg: 'white' }

  console.log(activeStyles) // { color: 'white', bg: 'blue.500' }

  return (
    <Center d="flex">
      <MyBtn
        {
          ...{
            onClick: () => setBtnClicked(true),
            text: 'document',
            ...(btnClicked ? { ...activeStyles } : { ...inactiveStyles }),
          }
        }
      />
    </Center>
  )
}

為了讓它工作，我應該這樣做，我認為是一樣的：

  <MyBtn
    {...{
      onClick: () => setBtnClicked(true),
      text: 'Document',
      ...(btnClicked ? { color: 'white', bg: 'blue.500' } : { color: 'blue.500', bg: 'white' }),
    }}
  />

有什么想法嗎？

Answer 1

您必須從DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,HTMLButtonElement>擴展您的界面，以便它可以具有默認按鈕的屬性。 完整的代碼是

import React, {
    ButtonHTMLAttributes,
    DetailedHTMLProps,
    FunctionComponent,
    HTMLProps,
} from "react";

interface BtnProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,HTMLButtonElement>  {
  bg: string
  text: string
  color: string
  onClick: () => void
}

Answer 2

  <MyBtn
      onClick={() => setBtnClicked(true)}
      text="document"
      {...(btnClicked ? activeStyles : inactiveStyles)}
   />