Reactjs renderProp函数的Typescript错误

我已经创建了一个

RestrictedRoute

react-typescript组件。 当用户已连接且页面受到限制时，它应重定向到/dashboard页面。如果不是，则返回一条路径，路径中的组件以道具形式传递

RestrictedRoute.tsx

：

interface Props {
  component: ComponentType;
  restricted?: boolean;
}

const RestrictedRoute = ({ component: Component, restricted, ...rest }: Props & RouteProps) => {
  const { data: userConnected, error } = useSWR('userConnected', checkUserLogged);

  if (userConnected !== undefined) {
    return (
      <Route
        {...rest}
        render={(props) =>
          userConnected && restricted && !error ? (
            <Redirect to={ROUTES.DASHBOARD} />
          ) : (
            <Component {...props} />
          )
        }
      />
    );
  }

  if (error) return <Redirect to={ROUTES.LOGIN} />;

  return <LoadingPage />;
};

export default RestrictedRoute;

测试正在运行，但我在编译时遇到以下类型脚本错误：

类型为“render”的参数不能分配给类型为“children”的参数。

当我替换

.renderProp（'render'）（）与
.renderProp（'render'）（）我看到另一个错误：
类型“RouteProps”不满足约束“children”

你能帮我一下吗？
我找到了一个解决方案，它使用RouteProps类型和route components props mock for renderProp参数（强制执行，因为react router dom的渲染函数在其typescript定义中需要此选项）：

const routeComponent propsmock={
历史：{}如有，
位置：{}如有，
匹配：{}如有，
};
it.only（'在获取数据且用户未连接时应返回组件'，（）=>{
const userConnected=false；
const fakePath='/youhou'；
mockUseSwr.mockReturnValueOnce（{data:userConnected}）；
常量包装器=浅（）；
const routeWrapper=wrapper.find（Route.renderProp（'render'））(
routeComponentPropsMock，
);
expect（routeWrapper.find（props.component））.toHaveLength（1）；
});

interface RestrictedRouteProps {
  component: ComponentType;
}

describe('RestrictedRoute', () => {
  const props: RestrictedRouteProps = {
    component: () => <></>,
  };
  const mockUseSwr = useSWR as jest.Mock;
  beforeEach(() => {
    mockUseSwr.mockClear();
  });

it('should return Component when data fetched and user not connected', () => {
    const userConnected = false;
    const fakePath = '/youhou';
    mockUseSwr.mockReturnValueOnce({ data: userConnected });
    const wrapper = shallow(<RestrictedRoute component={props.component} path={fakePath} />)
      .find(Route)
      .renderProp('render')();
    expect(wrapper.find(props.component)).toHaveLength(1);
  });

const routeComponentPropsMock = {
    history: {} as any,
    location: {} as any,
    match: {} as any,
  };

it.only('should return Component when data fetched and user not connected', () => {
    const userConnected = false;
    const fakePath = '/youhou';
    mockUseSwr.mockReturnValueOnce({ data: userConnected });
    const wrapper = shallow(<RestrictedRoute component={props.component} path={fakePath} />);
    const routeWrapper = wrapper.find<RouteProps>(Route).renderProp('render')(
      routeComponentPropsMock,
    );
    expect(routeWrapper.find(props.component)).toHaveLength(1);
  });