React组件TS报错：Type '{ children: Element[]; }'与IntrinsicAttributes无共同属性

这个报错的核心原因是自定义组件ContentCenterDiv的Props类型没有声明支持children属性，但你在使用它时传入了子元素，TypeScript会严格校验组件接收的属性是否匹配定义的类型。

修复方案一：手动声明children属性 #

修改ContentCenterDiv.tsx的Props定义，加入children的类型声明，同时要在div中渲染children（否则子元素不会显示）：

import React from "react";

export default function ContentCenterDiv({ className, children, ...others }: { 
  className?: string; 
  children?: React.ReactNode 
}) {
    return (
      <div {...others} className={`w-100 d-flex flex-column align-items-center ${className}`}>
        {children}
      </div>
    );
}

修复方案二：继承HTML元素的内置Props类型 #

如果ContentCenterDiv本质是对原生div的封装，更简洁的方式是直接使用React提供的React.HTMLAttributes<HTMLDivElement>类型，它包含了div所有原生属性（包括children、className、style等）：

import React from "react";

export default function ContentCenterDiv({ className, ...others }: React.HTMLAttributes<HTMLDivElement>) {
    return <div {...others} className={`w-100 d-flex flex-column align-items-center ${className}`} />;
}

两种方案都能解决类型报错，方案二更适合封装原生HTML元素的组件，避免手动声明大量属性。

内容的提问来源于stack exchange，提问作者Daniel Corona