是否有可能有一个 React 组件可以动态地找出它有什么道具？
例子：
type BaseType = {
baseProp?: ...
as?: ...
}
type Extended = {
extendedProp?: ...
}
<Base /> // expected props => { baseProp }
<Base as={ExtendedComponent} extendedProp={...} /> // expected props => { baseProp, extendedProp }
从这个答案中我们可以得到一个提示，使用交集首先推断道具的类型，as然后使用这些道具来验证任何额外的属性：
type BaseType = {
baseProp?: number
}
type Extended = {
extendedProp?: string
}
declare const ExtendedComponent: React.FC<Extended>
function Base<T = {}>(p: BaseType & { as? : React.ComponentType<T>} & T): React.ReactElement{
if(p.as) {
const Child = p.as;
return <div>{p.baseProp}<Child {...p as T}></Child></div>
}else {
return <div>{p.baseProp}</div>
}
}
let s = <Base /> // expected props => { baseProp }
let a = <Base as={ExtendedComponent} extendedProp="a" />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句