반응형
대응 유형 스크립트 통과 속성이 인터페이스에 선언되지 않았습니까?
안녕하세요, 저는 이제 막 타자와 반응을 시작하는 중입니다!
나는 이 간단한 버튼 구성 요소를 가지고 있다
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>)
}
반응형
'개발하자' 카테고리의 다른 글
서버 없이 파일://에서 Svelte 앱 실행 (0) | 2023.06.03 |
---|---|
push_notebook은 Google Colab Jupyter 노트북에서 작동하지 않습니다 (0) | 2023.06.02 |
FastAPI/OpenAPI에서 여러 응답 모델을 사용할 수 있는 방법이 있습니까? (0) | 2023.06.01 |
파이썬에서 작동하는 특성 모듈을 어떻게 얻을 수 있나요? (0) | 2023.06.01 |
FastAPI에서 파일을 가져올 때 브라우저 캐시를 사용하는 것은 어떻습니까? (0) | 2023.05.31 |