如何在TSX组件中正确实现...rest语法？

你的问题出在组件的Props接口未包含HTML元素的原生属性。IParent仅定义了children，但你传入的style属于div元素的原生属性，TypeScript因此抛出类型不匹配的错误。

正确实现方式 #

让组件的Props类型继承React提供的HTMLAttributes<HTMLDivElement>，这样会自动包含所有div元素的原生属性（如style、className等），无需手动逐一声明：

import { HTMLAttributes } from "react";

// 继承div元素的所有标准属性，自动包含children
interface IParentProps extends HTMLAttributes<HTMLDivElement> {
  // 如需自定义额外属性，在此添加即可
}

function Container({ children, ...rest }: IParentProps) {
  return <div {...rest}>{children}</div>;
}

export default function App() {
  return (
    <Container style={{ border: "1px solid red" }}>
      <h1>Hello World!</h1>
    </Container>
  );
}

简化写法（无需自定义接口） #

如果不需要额外的自定义属性，甚至可以直接用HTMLAttributes<HTMLDivElement>作为参数类型，省去接口定义步骤：

import { HTMLAttributes } from "react";

function Container({ children, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return <div {...rest}>{children}</div>;
}

export default function App() {
  return (
    <Container style={{ border: "1px solid red" }}>
      <h1>Hello World!</h1>
    </Container>
  );
}

原理说明 #

React为所有HTML元素提供了对应的属性类型，HTMLAttributes<HTMLDivElement>包含了div元素的全部标准属性，TypeScript能据此正确校验传入的props，同时...rest可以安全解构出除children外的其他属性，传递给底层的div元素。

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