[英]Generic functional component, Type 'U' is not assignable to type 'T'. How to union types correctly?
I've googled this issue and come across a few similar issues, but the Generic convolution has me scrating my head with each example.我用谷歌搜索了这个问题并遇到了一些类似的问题,但是通用卷积让我对每个例子都头疼不已。 I've attempted a few things;
我尝试了一些事情; I thought the most promising being
Omit
which I theorized would work like so:我认为最有前途的是我推测的
Omit
会像这样工作:
function PassPropertiesAndRender<ComponentProperties>(props: Omit<ComponentProperties, 'element'> & iPPR) {
But also get the typescript error TS2322: Type '{ element: ComponentType; }' is not assignable to type 'Omit '.
但是也得到typescript错误
TS2322: Type '{ element: ComponentType; }' is not assignable to type 'Omit '.
TS2322: Type '{ element: ComponentType; }' is not assignable to type 'Omit '.
This is my current error message with the full code.这是我当前的错误消息和完整代码。 The error rises from the
<PassPropertiesAndRender<T>
call.错误源于
<PassPropertiesAndRender<T>
调用。 Thanks in advance for looking!提前感谢您的关注!
TS2322: Type '{ element: ComponentType<any>; }' is not assignable to type 'T'. 'T' could be instantiated with an arbitrary type which could be unrelated to '{ element: ComponentType<any>; }'.
import React from "react";
import {Outlet, useLocation, useNavigate, useParams} from "react-router-dom";
import Bootstrap, {iBootstrapProperties, iBootstrapState} from "src/Bootstrap";
import {Location} from "history";
import {NavigateFunction} from "react-router";
interface WithRouter {
location: Location;
navigate: NavigateFunction;
params: any
}
export type iAmBootstrapDescendant = iBootstrapState & iBootstrapProperties & WithRouter;
interface iPPR {
element: React.ComponentType<any>
}
function PassPropertiesAndRender<ComponentProperties>(props: ComponentProperties & iPPR) {
const Component = props.element;
const bootstrap = Bootstrap.bootstrap;
const location = useLocation();
const navigate = useNavigate();
const params = useParams();
console.info(Component.displayName || Component.name, {location, navigate, params});
return <Component {...bootstrap.props}
{...bootstrap.state}
location={location}
navigate={navigate}
params={params}
{...props}>
<Outlet/>
</Component>; // never change the order
}
PassPropertiesAndRender.displayName = 'PassPropertiesAndRender';
export const ppr = <T,>(Element: React.ComponentType<any>, props = {}) => <PassPropertiesAndRender<T> element={Element} {...props}/>;
export default ppr
So, after some more playing, I've found the solution. 所以,在玩了一些之后,我找到了解决方案。
import React from "react";
import {Outlet, useLocation, useNavigate, useParams} from "react-router-dom";
import Bootstrap, {iBootstrapProperties, iBootstrapState} from "src/Bootstrap";
import {Location} from "history";
import {NavigateFunction} from "react-router";
interface WithRouter {
location: Location;
navigate: NavigateFunction;
params: any
}
export type iAmBootstrapDescendant = iBootstrapState & iBootstrapProperties & WithRouter;
interface iPPR {
element: React.ComponentType<any>
}
function PassPropertiesAndRender<ComponentProperties>(props: ComponentProperties & iPPR) {
const Component = props.element;
const bootstrap = Bootstrap.bootstrap;
const location = useLocation();
const navigate = useNavigate();
const params = useParams();
console.info(Component.displayName || Component.name, {location, navigate, params});
return <Component {...bootstrap.props}
{...bootstrap.state}
location={location}
navigate={navigate}
params={params}
{...props}>
<Outlet/>
</Component>; // never change the order
}
PassPropertiesAndRender.displayName = 'PassPropertiesAndRender';
export const ppr = <T,>(Element: React.ComponentType<any>, props: T) => <PassPropertiesAndRender<T> element={Element} {...props}/>;
export default ppr
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.