React Typescript-绑定元素“ C”隐式具有“ any”类型。 TS7031

Question

关于React组件，我在将js转换为ts格式时遇到问题。

错误是

绑定元素“ C”隐式具有“ any”类型。 TS7031

它发生在该函数的参数C上：

export default function UnauthenticatedRoute({ component: C, appProps, ...rest }:
                                                 RouteProps & {appProps: AppProps}) {
  const redirect = querystring("redirect");
  return (
    <Route {...rest}
        render={ props => !appProps.isAuthenticated ?
            <C {...props} {...appProps} />
          :
            <Redirect to={redirect === "" || redirect === null ? "/" : redirect}/>
        }
    />
  );
}

据我了解，RouteProps中的组件键如下所示：

component ?: React.ComponentType | React.ComponentType;

键入的内容不足。

我该如何解决？

Answer 1

更新

由于C是组件而不是prop。
因此，我们可以用两个单独的参数定义UnauthenticatedRoute组件来处理它。

interface RouteProps {}
interface AppProps {
  isAuthenticated: boolean;
}
interface Props {}

const UnauthenticatedRoute = (
  { appProps, ...rest }: RouteProps & { appProps: AppProps },
  C: React.ComponentType<Props>
) => {
  const redirect = queryString("redirect");
  return (
    <Route
      {...rest}
      render={props =>
        !appProps.isAuthenticated ? (
          <C {...props} {...appProps} />
        ) : (
          <Redirect
            to={redirect === "" || redirect === null ? "/" : redirect}
          />
        )
      }
    />
  );
};

您可以在此处在线尝试：

来源

您可能要使用React.ComponentType

export const UnauthenticatedRoute = <P extends object>(Component: React.ComponentType<P>, ...

然后您就可以将其用作普通类型的组件

render() {
  return <Component {...this.props as P} />;
}

请参考此库的来源react-debounce-rendering

还有react-higher-order-component-patterns-in-typescript中有关React.ComponentType的文章