React.FC 的 children没法使用简单解决方法

JettYjj

已于 2024-09-01 20:41:16 修改

阅读量437

点赞数 5

文章标签： react.js 前端前端框架

于 2024-09-01 20:08:29 首次发布

本文链接：https://blog.csdn.net/qq_45224286/article/details/141788700

版权

声明：是简单的解决方法，我并不知道原理，刚用没多久

问题

在使用procomponets框架时，需要渲染子路由，使用{children} 去指定子路由，但是在React 18 却不行。
在这里插入图片描述

原因

升级了react18之后，react官方移除了对于默认children的支持
可以查看源码

// react 18+ FC类型定义
type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    // 注意这一行的差别
    (props: P, context?: any): ReactNode;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

看看升级前的React 16.8和17

// react 16.8 / 17 FC类型定义
type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    // 注意这一行的差别
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

可以看出, FunctionalComponent（即FC）在18与16.8 / 17类型定义不完全相同，18将PropsWithChildren移除了，即props不会天生包含children了，所以导致了上一部分的ts错误。

网上的解决方法

方法1：定义一个有PropsWithChildren得来代替FC

import { PropsWithChildren, FC } from 'react';

const Component: RFC<T = unknown> = FC<PropsWithChildren<T>>;

方法2：对Porps重新定义

type Props = {
  children?: React.ReactNode
};
const Component: React.FC<Props> = ({children}) => {...}

方法3：直接定义children

const Component: React.FC<Props> = ({children}=children?: React.ReactNode) => {...}

不管什么方法，在网页上都渲染不了子路由，那么我将children在console输出，得到是undefined

我的解决方法

我在umi的文档中发现，可以通过 < Outlet /> 来渲染子路由，就试了一下，果然是可以的

import {PageContainer} from '@ant-design/pro-components';
import React from 'react';
import { Outlet } from 'umi'

const Admin: React.FC = () => {
  return (
    <PageContainer>
    //用umi的标签进行渲染子路由
      <Outlet/>
    </PageContainer
      >
  );
};

export default Admin;