[英]How to create a generic arrow function with react and typescript
I'm trying to create a generic wrapper component for apollo graphql results.我正在尝试为 apollo graphql 结果创建一个通用包装器组件。 I want this wrapper to wait for the query to complete successfully then render a component that was passed into the props.我希望这个包装器等待查询成功完成,然后呈现一个传递给道具的组件。 The passed in component should have props of type QueryResult<T>
.传入的组件应该具有QueryResult<T>
类型的道具。
This code snippet gives me an error on Col 66 saying这个代码片段在 Col 66 上给了我一个错误说
Cannot find name 'T'.ts(2304)找不到名称“T”.ts(2304)
import React from 'react';
import { QueryResult } from 'react-apollo';
import { useSandboxContext } from 'src/js/shared/components/SandboxContext';
import { ErrorContent } from 'src/js/shared/components/ErrorContent';
import { PageSpinner } from 'src/js/shared/components/PageSpinner';
interface WrapperComponentProps<T> extends QueryResult<T> {
// TODO: figure out how to specify that the wrapped component takes the results
// Something like this `React.ReactType<QueryResult<T>>` but this causes errors
wrappedComponent: React.ReactType;
}
// Getting an error from `React.FC<WrapperComponentProps<T>>`
// `Cannot find name 'T'.ts(2304)`
export const ApolloResultWrapper: React.FC<WrapperComponentProps<T>> = <T extends object>(props: WrapperComponentProps<T>) => {
const sandbox = useSandboxContext();
if (props.error) {
sandbox.logger.error('query failed', props.error);
return <ErrorContent />
}
if (props.loading) {
return <PageSpinner />;
}
if (!props.data) {
return <ErrorContent />
}
// TODO: figure out how to spread all the props except wrappedComponent
return <props.wrappedComponent {...props} wrappedComponent={undefined} />;
}
If the error is about <T extends object>
place try to change type casting <T extends object>
to .... as T extends object
如果错误是关于<T extends object>
的地方尝试将类型转换<T extends object>
更改为.... as T extends object
https://www.typescriptlang.org/docs/handbook/jsx.html#the-as-operator https://www.typescriptlang.org/docs/handbook/jsx.html#the-as-operator
Finally managed to solve the issue终于设法解决了问题
interface WrappedComponentProps<T> {
data: T
}
interface WrapperComponentProps<T, K> {
apolloResult: QueryResult<T>;
wrappedComponent: React.ComponentType<WrappedComponentProps<T> & K>;
componentProps: Omit<K, keyof WrappedComponentProps<T>>;
}
type ComponentProps<T, K> = React.PropsWithChildren<WrapperComponentProps<T, K>>;
export const ApolloResultWrapper = <T extends object, K = {}>(props: ComponentProps<T, K>) => {
const sandbox = useSandboxContext();
if (props.apolloResult.error) {
sandbox.logger.error('stuff broke', props.apolloResult.error);
return <ErrorContent />
}
if (props.apolloResult.loading) {
return <PageSpinner />;
}
if (!props.apolloResult.data) {
return <ErrorContent />
}
return <props.wrappedComponent
children={props.children}
data={props.apolloResult.data}
{...props.componentProps as K}
/>;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.