通用高阶 React 组件给出类型错误
Generic higher-order React component gives type errors
我正在尝试编写一个通用的 React 组件,它需要两种类型(IFoo
或 IBar
)之一的道具,以及一个接受所选类型道具的组件。
为什么下面的方法不起作用?
import React from 'react';
interface IFoo {
x: string;
}
interface IBar {
x: number;
}
const foo: React.FunctionComponent<IFoo> = (props: IFoo) => {
console.log("hello from foo!");
return <div>foo</div>
};
const bar: React.FunctionComponent<IBar> = (props: IBar) => {
console.log("hello from bar!");
return <div>bar</div>
};
interface IProps<T> {
props: T[];
Component: React.FunctionComponent<T>;
}
class HigherOrderComponent<T extends IBar | IFoo> extends React.Component<IProps<T>> {
render() {
const { props, Component } = this.props;
return (<div>
{props.map(prop => <Component {...prop}/>)};
</div>)
}
}
此returns以下错误:
Type 'T' is not assignable to type 'IntrinsicAttributes & T & { children?: ReactNode; }'.
Type 'IFoo | IBar' is not assignable to type 'IntrinsicAttributes & T & { children?: ReactNode; }'.
Type 'IFoo' is not assignable to type 'IntrinsicAttributes & T & { children?: ReactNode; }'.
Type 'IFoo' is not assignable to type 'T'.
'IFoo' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'IFoo | IBar'.
Type 'T' is not assignable to type 'IntrinsicAttributes'.
Type 'IFoo | IBar' is not assignable to type 'IntrinsicAttributes'.
Type 'IFoo' has no properties in common with type 'IntrinsicAttributes'.(2322)
您需要动态创建一个 HOC class,以便包装一个组件并为它们提供正确的类型
import React from 'react';
interface IFoo {
x: string;
}
interface IBar {
x: number;
}
const foo: React.FunctionComponent<IFoo> = (props: IFoo) => {
console.log("hello from foo!");
return <div>foo</div>
};
const bar: React.FunctionComponent<IBar> = (props: IBar) => {
console.log("hello from bar!");
return <div>bar</div>
};
function createHOC<P extends IFoo | IBar>(Component: React.ComponentType<P>) {
return class HigherOrderComponent extends React.Component<P> {
render() {
console.log(this.props.x)
return <Component {...this.props} />
}
}
}
const WrapperFooComponent = createHOC(foo)
const WrapperBarComponent = createHOC(bar)
希望对您有所帮助<3
快速修复是添加:
{props.map((prop: T & {}) => <Component {...prop}/>)};
我认为问题出在展开运算符和联合类型上(如果只有一种类型就可以正常工作)。我知道 TS 之前遇到过问题:(
希望对您有所帮助:)
我正在尝试编写一个通用的 React 组件,它需要两种类型(IFoo
或 IBar
)之一的道具,以及一个接受所选类型道具的组件。
为什么下面的方法不起作用?
import React from 'react';
interface IFoo {
x: string;
}
interface IBar {
x: number;
}
const foo: React.FunctionComponent<IFoo> = (props: IFoo) => {
console.log("hello from foo!");
return <div>foo</div>
};
const bar: React.FunctionComponent<IBar> = (props: IBar) => {
console.log("hello from bar!");
return <div>bar</div>
};
interface IProps<T> {
props: T[];
Component: React.FunctionComponent<T>;
}
class HigherOrderComponent<T extends IBar | IFoo> extends React.Component<IProps<T>> {
render() {
const { props, Component } = this.props;
return (<div>
{props.map(prop => <Component {...prop}/>)};
</div>)
}
}
此returns以下错误:
Type 'T' is not assignable to type 'IntrinsicAttributes & T & { children?: ReactNode; }'.
Type 'IFoo | IBar' is not assignable to type 'IntrinsicAttributes & T & { children?: ReactNode; }'.
Type 'IFoo' is not assignable to type 'IntrinsicAttributes & T & { children?: ReactNode; }'.
Type 'IFoo' is not assignable to type 'T'.
'IFoo' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'IFoo | IBar'.
Type 'T' is not assignable to type 'IntrinsicAttributes'.
Type 'IFoo | IBar' is not assignable to type 'IntrinsicAttributes'.
Type 'IFoo' has no properties in common with type 'IntrinsicAttributes'.(2322)
您需要动态创建一个 HOC class,以便包装一个组件并为它们提供正确的类型
import React from 'react';
interface IFoo {
x: string;
}
interface IBar {
x: number;
}
const foo: React.FunctionComponent<IFoo> = (props: IFoo) => {
console.log("hello from foo!");
return <div>foo</div>
};
const bar: React.FunctionComponent<IBar> = (props: IBar) => {
console.log("hello from bar!");
return <div>bar</div>
};
function createHOC<P extends IFoo | IBar>(Component: React.ComponentType<P>) {
return class HigherOrderComponent extends React.Component<P> {
render() {
console.log(this.props.x)
return <Component {...this.props} />
}
}
}
const WrapperFooComponent = createHOC(foo)
const WrapperBarComponent = createHOC(bar)
希望对您有所帮助<3
快速修复是添加:
{props.map((prop: T & {}) => <Component {...prop}/>)};
我认为问题出在展开运算符和联合类型上(如果只有一种类型就可以正常工作)。我知道 TS 之前遇到过问题:(
希望对您有所帮助:)