reactjs - 在 React 中，如何使用 Typescript 限制子节点的数量？

Question

我正在创建一个“列”组件。它应该只带一个或两个孩子。

如何使用 Typescript 限制孩子的数量？

标签： reactjstypescript

Answer 1

这似乎有效

import * as React from "react";

type ChildType = React.ReactElement;

interface ColumnProps {
  children: [ChildType, ChildType] | ChildType; // Either 2 of this type or one
}

const Column: React.FC<ColumnProps> = ({ children }) => {
  return <div>{children}</div>;
};

export default function App() {
  return (
    <div className="App">
      <Column>
        <div>Test 1</div>
        <div>Test 2</div>
      </Column>
    </div>
  );
}