Question

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

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组件时，打字稿能够编译并运行，但是当System.InvalidCastException: 'Conversion from string "" to type 'Double' is not valid.'组件失败时，打字稿会运行提供。我不知道该从哪里去，所以我们将竭诚欢迎您的帮助。

编辑：

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

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

0 个答案: