Question

我正在为NPM模块Informed创建类型。如果您点击链接，则会看到Form组件需要children或render或component道具。这是我尝试使用TS解决问题的方法：

export type ChildFunction<C> = (props: C) => React.ReactNode;

export interface BasicFormProps {
  // form props...
}

export interface ChildrenFormProps extends BasicFormProps {
  children:
    | React.ReactNode
    | ChildFunction<FormContext>;
}

export interface ComponentFormProps extends BasicFormProps {
  component: React.ComponentType<FormContext>;
}

export interface RenderFormProps extends BasicFormProps {
  render: ChildFunction<FormContext>;
}

export type FormProps = ChildrenFormProps | ComponentFormProps | RenderFormProps;

如果我尝试在不带任何道具的情况下调用组件，并说render道具是必需的，则会出错。但是，即使我提供了其他必需的道具（children或component），该错误也常常会持续存在。此外，它似乎不是最雄辩的方法...

Answer 1

您可以使用React PropTypes中的oneOfType。我认为这样可以解决问题。

在此处查看：https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes

您还可以像下面这样使用：

PropTypes.oneOfType([ 
  PropTypes.instanceOf(ChildrenFormProps),
  PropTypes.instanceOf(ComponentFormProps),
  PropTypes.instanceOf(RenderFormProps)
]);

如何使用TypeScript在React中仅要求一个道具？

1 个答案: