![](/img/trans.png)
[英]Typescript React: Conditionally mark prop to optional or mandatory using another prop passed to same component
[英]Is it possible in React Typescript to use a component prop interface with another prop?
基本上,我想要行injectComponentProps: object
被動態綁定到injectComponent的prop接口。 在這種情況下,它將是injectComponentProps: InjectedComponentProps
,但我希望它是動態的。
即,一旦prop injectComponent被設置,injectComponentProps就被定義為injectComponent的組件props。
這可能嗎?
interface InjectedComponentProps {
variant: string
size: number
}
const InjectedComponent: React.FC<InjectedComponentProps> = (props) => {
return <Text {...props}>hello</Text>
}
interface ComponentProps {
injectComponent: React.ReactType
injectComponentProps: object
}
const Component: React.FC<ComponentProps> = (props) => {
const InjectedComponent = props.injectComponent
return (
<>
<InjectedComponent {...props.injectComponentProps}/>
</>
)
}
const Main: React.FC = () => {
return (
<Component
injectComponent={InjectedComponent}
injectComponentProps={{ variant: 'footnote', size: 14 }}
/>
)
}
interface InjectedComponentProps {
variant: string
size: number
}
const InjectedComponent: React.FC<InjectedComponentProps> = (props) => {
return null
}
interface ComponentProps<T> {
injectComponent: React.FC<T>
injectComponentProps: T
}
const Component = <T extends {}>(props: ComponentProps<T>): JSX.Element => {
const InjectedComponent = props.injectComponent
return (
<>
<InjectedComponent {...props.injectComponentProps}/>
</>
)
}
const Main: React.FC = () => {
return (
<Component
injectComponent={InjectedComponent}
injectComponentProps={{ variant: 'footnote', size: 14 }}
/>
)
}
您應該嘗試將ComponentProps
修改為約束通用組件,而不是將類型簡單地聲明為object
,而是推斷其類型參數的props。
通用GetProps
使用條件類型推斷從組件推斷道具,即推斷泛型的類型參數。
type GetProps<C extends React.ComponentType<any>> = C extends React.ComponentType<infer P> ? P : any
interface InjectedComponentProps {
variant: string
size: number
}
const InjectedComponent: React.FC<InjectedComponentProps> = (props) => {
return <Text {...props}>hello</Text>
}
// make this a generic type
interface ComponentProps<C extends React.ComponentType<any>> {
injectComponent: C
injectComponentProps: GetProps<C>
}
// and use it here
const Component: React.FC<ComponentProps<typeof InjectedComponent>> = (props) => {
const InjectedComponent = props.injectComponent
return (
<>
<InjectedComponent {...props.injectComponentProps}/>
</>
)
}
const Main: React.FC = () => {
return (
<Component
injectComponent={InjectedComponent}
injectComponentProps={{ variant: 'footnote', size: 14 }}
/>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.