将...props传递给样式显示类型错误

Question

我想有可能添加更多的样式按钮，如果我必须，但如果我这样做，但我得到错误。

我把类型传递给它，就是传递给FunctionComponent类型来注释匿名函数。FunctionComponent还为儿童添加了一个类型(它是preact中的类型)

import type { FunctionComponent } from "preact";
import type { HTMLAttributes } from "preact/compat";


export const ButtonSecondary: FunctionComponent<{ [props: string]: HTMLAttributes<HTMLButtonElement> }> = ({ children, ...props }) => (
    <button class={`border-gray-800 border-4 bg-white rounded-md hover:  py-4 px-3 text-center font-bold text-gray-800 text-base cursor-pointer hover:translate-y-2 duration-150 
    ${...props}
`}>
        {children}
    </button>
)

Answer 1

理想情况下，一个特定的道具应该提供额外的样式，而不是所有的道具(正如您当前的代码所做的)。

因此，如果您使用的是ButtonSecondary，如下所示：

  <ButtonSecondary
     extraClasses="anotherClass andAnother"
  >

您只需使用${props.extraClasses}即可。您不希望将您的道具限制为只提供将在组件中某个特定位置使用的数据。

此外，您为该组件定义道具的方式也可以改进。也许可以使用这样的方法：

 type ButtonProps = {
  extraClasses: string,
  otherStuff?: string
 }
...
export const ButtonSecondary: FunctionComponent<ButtonProps>