React组件报错：'children' prop需string类型，传入多子元素如何修复？

核心问题 #

你判断的没错，问题确实出在CenterPiece/index.tsx的ICenterPieceProps定义上：你把children的类型设为了string，但在LoadingComponent中给<CenterPiece>传递的子元素是<Card>组件（属于React元素），并非字符串类型，这就导致了类型不匹配的错误。

修复步骤 #

1. 修改CenterPiece的children类型 #

将ICenterPieceProps中的children类型从string改为React.ReactNode——这是React官方推荐的用于表示子元素的类型，它支持字符串、React元素、数组、null等多种合法的子元素形式。

修改后的CenterPiece/index.tsx代码：

import React from 'react';
import { Container } from 'reactstrap';

export interface ICenterPieceProps {
  children: React.ReactNode; // 修正子元素类型
}

const CenterPiece: React.FunctionComponent<ICenterPieceProps> = (props) => {
  const { children } = props;

  return (
    <Container fluid className="p-0">
      <Container
        style={{
          position: 'absolute',
          left: '50%',
          top: '50%',
          transform: 'translate(-50%, -50%)',
          WebkitTransform: 'translate(-50%, -50%)'
        }}
        className="d-flex justify-content-center"
      />
        {children}
    </Container>
  );
};

export default CenterPiece;

2. 可选优化：统一Loading相关组件的children类型 #

当前Loading和LoadingComponent的props中，children也被定义为string，如果未来需要给这两个组件传递React元素而非纯文本，建议同样将它们的children类型改为React.ReactNode：

修改LoadingComponent/index.tsx中的接口：

export interface ILoadingProps {
    dotType?: string;
    children: React.ReactNode; // 更新类型
}

export interface ILoadingComponentProps {
    card?: boolean;
    dotType?: string;
    children: React.ReactNode; // 更新类型
}

额外布局修正（可选） #

注意CenterPiece的渲染代码中，第二个<Container>是自闭合标签，{children}直接放在了它外面，可能不符合居中布局的预期。建议将children移入该Container内部：

return (
  <Container fluid className="p-0">
    <Container
      style={{
        position: 'absolute',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)',
        WebkitTransform: 'translate(-50%, -50%)'
      }}
      className="d-flex justify-content-center"
    >
      {children} {/* 将子元素放入居中容器内 */}
    </Container>
  </Container>
);

内容的提问来源于stack exchange，提问作者John Beasley