javascript - 在 React Typescript 中是否可以将组件道具接口与另一个道具一起使用?
问题描述
基本上,我希望 lineinjectComponentProps: 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 }}
/>
)
}
推荐阅读
- git - 在 Git 中排除受控文件的更改
- react-native - Nanoid 不能用于 react-native
- javascript - Firebase 函数不返回正确的数据
- html - Html 视频作为背景
- javascript - 如何在 React with Hooks 中动态分配地图内的类
- python - 如何翻译多个单词 discord.py
- python - Python 与 Stata 的交互
- sql - 如何将标识序列添加到 Hana 中的现有列?
- perl - 如何将多个请求中传递的参数存储到同一个 CGI?
- angular - 找不到带有路径的控件:'transOptsArr -> width'