TypeScript + React：如何输入“rest”道具，将其余道具收集到一个对象中，然后将它们传播到某个元素？

Question

function Foo({
  children,
  ...rest
}: {
  children: React.ReactNode;
  /*rest: how do I type `rest`? */
}) {
  return (
    <span style={{ background: "red" }} {...rest}>
      {children}
    </span>
  );
}

export default function App() {
  return (
    <div className="App">
      <Foo style={{ background: "blue" }}>Hello CodeSandbox</Foo>
    </div>
  );
}

这是演示：https://codesandbox.io/s/how-to-type-rest-huv2z? file=/src/App.tsx:50-412

Foo用于覆盖span接受的 props。我该如何rest输入Foo？

Answer 1

您无法直接键入对象的展开部分，但可以使用联合类型 ( &) 添加必要的属性。

在这种情况下，您想要允许的额外属性的类型为React.HTMLAttributes<HTMLSpanElement>。所以你最终会得到：

function Foo({
  children,
  ...rest
}: {
  children: React.ReactNode;
} & React.HTMLAttributes<HTMLSpanElement>) {
  return (
    <span style={{ background: "red" }} {...rest}>
      {children}
    </span>
  );
}

另外，您可以避免children使用React.FunctionComponent类型手动输入属性。这实际上避免了联合定义，并且在 React 代码中更惯用。

const Foo: React.FunctionComponent<React.HTMLAttributes<HTMLSpanElement>> = ({
  children,
  ...rest
}) => {
  // ...
}

Answer 2

您可以使用类似这样的类型：

{
  children: React.ReactNode;
  /*rest: how do I type `rest`? */
} & HTMLProps<HTMLSpanElement>