为了我的死,我在过去的三个小时里都无法解决这个问题,我感到非常沮丧,因此如果我听起来很有侵略性,我会提前道歉。
我所希望的是能够为我的组件定义一个打字稿接口,并使它扩展任何组件使用的默认接口,以避免不得不声明每个该死的默认道具,例如classname
,{{1} }等在我自己的界面中。
我有这个组件:
onClick
现在该组件没有错误,至少打字稿没有给出任何错误。但是,如果我尝试将此组件呈现在另一个组件中,例如:
import React,{ useEffect,useRef,FunctionComponent } from 'react'
import './style.scss'
interface ISideProps {
wideModeEnabled: boolean
toggleWideMode
setfocus
}
const AppLayoutSide: FunctionComponent<ISideProps> = (props) => {
const ref = useRef() as any
...
...
etc.
return <div {...props} />
}
错误提示:
输入'{classname:string; wideModeEnabled:布尔值; toggleWideMode: ()=>无效; setfocus:调度>; }' 不是 可分配给类型'IntrinsicAttributes&ISideProps&{children ?: ReactNode; }'。
属性“ classname”在类型上不存在 'IntrinsicAttributes和ISideProps和{子代?:ReactNode; }'。ts(2322)
这显然是对的,我没有在const otherComponent = () => {
return (
<div classname='content'>
<Menu />
<Main />
<Side
classname={'whatever'} //Typscript error happens here
wideModeEnabled={wideMode}
toggleWideMode={toggleWideMode}
setfocus={setSideFocus}
/>
</div>
)
}
接口上定义classname,但是我想扩展默认的react props该死的!而且,无论我尝试了什么,我似乎都无法正常工作。在线上的每本指南都一直建议将ISideProps
添加到组件声明中,我确实这样做了,但并没有解决任何问题。
请帮助,我迷失了方向。