reactjs - 使用打字稿限制反应孩子的有效道具

Question

我在一些子组件周围有一个包装器组件，我想用它来动态地操纵它们的道具。我的问题是，当孩子的道具类型无效时，我想要一种方法让 Typescript 无法编译，但找不到解决方法。我在这里设置了一个代码沙箱，相关部分在下面的代码段中：

const ValidChild = (props: TestProps) => (
  <span>
    Foo: {props.foo}, Bar: {props.bar}
  </span>
);

const InvalidChild = (props: OtherProps) => <span>Beep: {props.beep}</span>;

const ExtendedValidChild = (props: ExtendedTestProps) => (
  <span>
    Foo: {props.foo}, Bar: {props.bar}, Baz: {props.baz.toString()}
  </span>
);

const Wrapper = ({ children }: { children: React.ReactElement<TestProps> }) => {
  return React.cloneElement(children, { foo: "BEEP", bar: 2 });
};

const App = () => {
  return (
    <Wrapper>
      <InvalidChild beep="a" />
    </Wrapper>
  );
};

type TestProps = {
  foo: string;
  bar: number;
};

type ExtendedTestProps = {
  foo: string;
  bar: number;
  baz: boolean;
};

type OtherProps = {
  beep: "a" | "b";
};

我想要的是在向组件提供ValidChild或ExtendedValidChild组件时编译和运行打字稿Wrapper，但在提供组件时失败InvalidChild。我不知道我可以从这里去哪里，所以任何帮助都会受到欢迎。

编辑：

经过进一步调查，这似乎是其他人面临的一个现存问题，这可以在这个问题的已接受答案的评论中看到。如果有人可以提供帮助，我仍然想要一个解决方案，但看起来这是一个长期存在的利基问题，可能没有潜在的解决方案。

标签： reactjstypescriptreact-props