Reactjs 使用typescript限制react子级的有效道具

我在一些子组件周围有一个包装器组件，我想用它来动态操作它们的道具。我的问题是，当孩子有一个无效的props类型时，我想找到一种方法让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";
};

const ValidChild=（props:TestProps）=>(
Foo:{props.Foo}，Bar:{props.Bar}
);
const InvalidChild=（props:OtherProps）=>Beep:{props.Beep}；
const ExtendedValidChild=（props:ExtendedTestProps）=>(
Foo:{props.Foo}，Bar:{props.Bar}，Baz:{props.Baz.toString（）}
);
常量包装器=（{children}:{children:React.ReactElement}）=>{
return React.cloneElement（children，{foo:“BEEP”，bar:2}）；
};
常量应用=（）=>{
返回(
);
};
类型TestProps={
foo:string；
条：数字；
};
类型ExtendedTestProps={
foo:string；
条：数字；
baz：布尔型；
};
键入OtherProps={
嘟嘟声：“a”|“b”；
};

我想让typescript在

ValidChild

或

ExtendedValidChild

组件提供给

Wrapper

组件时编译并运行，但在提供

InvalidChild

组件时失败。我不知道我能从这里走到哪里，所以任何帮助都是非常受欢迎的

编辑：

---

在进一步调查之后，这似乎是其他人面临的一个现存问题，这一点可以从接受答案的评论中看出。如果有人能提供帮助，我仍然希望有一个解决方案，但这似乎是一个长期存在的利基问题，可能没有潜在的解决方案。

InvalidChild:FC=…

？这是否回答了您的问题@jonrsharpe我担心这不起作用，将其键入

React.FC

仍然会导致它在作为

包装器的子级传递时通过类型检查。另外，我担心提供的链接似乎也不起作用。
InvalidChild:FC=…
？这是否回答了您的问题@jonrsharpe我担心这不起作用，将其键入
React.FC
仍然会导致它在作为
包装器的子级传递时通过类型检查。另外，我担心提供的链接似乎也不起作用。