본문 바로가기

개발하자

대응 유형 스크립트 통과 속성이 인터페이스에 선언되지 않았습니까?

반응형

대응 유형 스크립트 통과 속성이 인터페이스에 선언되지 않았습니까?

안녕하세요, 저는 이제 막 타자와 반응을 시작하는 중입니다!

나는 이 간단한 버튼 구성 요소를 가지고 있다

import React from 'react'
interface Props{
    className?:string,
    onClick:()=> void,
    children: React.ReactNode
}
export const Button:React.FC<Props> = ({onClick = ()=>1,children,className = "",...rest}) =>{
return(
        <button onClick={onClick} className={"r-button cursor-p br " + className} {...rest}>
            {children}
        </button>)
} 

그리고 그것은 잘 작동하지만 내가 스타일ind에만 사용하는 구성요소에 속성을 추가하려고 하면 이런 것이다

<Button loading="true" onClick={()=>console.log("yoohoi")}>Click me!</Button>

로드 속성과 관련하여 이 오류가 발생했습니다

Type '{ children: (Element | ReactNode)[]; className: string; onClick: () => Promise<void>; loading: string; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
  Property 'loading' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.

그래서 제 질문은 소품 인터페이스에서 선언할 필요 없이 스타일링 목적으로만 사용하는 전달 속성을 어떻게 처리할 수 있을까요? 저는 ...rest가 그 일을 할 수 있다고 생각했습니다 :/




사용할 수 있습니다

  • data-* 속성 중 하나(데이터 속성이 사용자 지정 속성으로 설계되었기 때문에 및 )

  • 또는 로드 시 요소 스타일을 지정할 className 전달




다른 사용자에게 도움이 될 수 있는 솔루션 추가. 추가 전문가에게 전달하는 데 사용할 수 있는 구성요소 제안을 확장할 수도 있습니다.

interface Props extends ComponentProps<any> {
    className?:string,
    onClick:()=> void,
    children: React.ReactNode
}

그리고 전체 소품을 어린이 구성 요소에 펼쳐 놓고, 덮어쓰려는 소품보다 먼저 소품이 보내졌는지 확인하십시오.

export const Button:React.FC<Props> = ({props: Props) => { 
return(
   <button {...props} className={"r-button cursor-p br " + props.className} >
       {children}
   </button>) 
}

반응형