javascript - 传递联合类型的 Prop 以 react 需要联合中的一种类型的子组件

Question

在 Typescript+React 中。我有两个组件(模块)，它们具有用接口(interface)指定的特定类型。此外，我还有一个父组件，它采用一个数组，其中一个联合指定为 props。

子组件:

模块一

interface IModuleOneProps {
  moduleOneSpecificProp: string;
  module_type: sting;
  commonProp: string;
}

const ModuleOne: React.SFC<IModuleOneProps> = props => {
  return (
    <p>{moduleOneSpecificProp + " " + commonProp}</p>
  );
};

export default ModuleOne;

模块二

interface IModuleTwoProps {
  moduleTwoSpecificProp: string;
  module_type: sting;
  commonProp: string;
}

const ModuleTwo: React.SFC<IModuleTwoProps> = props => {
  return (
    <p>{moduleTwoSpecificProp + " " + commonProp}</p>
  );
};

export default ModuleTwo;

包含模块数组的容器组件，可以是两种类型:

interface IContainerModuleProps {
modules: Array<
    IModuleOneProps | IModuleTwoProps
  >;
}

class ContainerModule extends React.Component<IContainerModuleProps> {

  public render() {
    const module = this.props.modules[1];
    switch (module.module_type) {
      case 'module_one':
        return <ModuleOne {...module} />;
      case 'module_two':
        return <ModuelTwo {...module} />;
    }
  }
}

但是 TypeScript 不允许我在渲染组件时展开 module。它提示类型。

Type '{ commonProp: string; moduleOneSpecificProp: string; }' is not assignable to type 'IntrinsicAttributes & IModuleOneProps & { children?: ReactNode; }'.
  Type '{ commonProp: string; moduleTwoSpecificProp: string; }' is not assignable to type 'IntrinsicAttributes & IModuleOneProps & { children?: ReactNode; }'.
    Property 'moduleOneSpecificProp' is missing in type '{ commonProp: string; moduleTwoSpecificProp: string; }'.

是否有我在这里没有看到的快速修复方法？或者我是否必须在将其传递给子组件之前重建 prop 对象 (module)？

Answer 1

如果您这样做，您需要将 module_type 属性定义为字符串文字类型(一种只有一个值的字符串类型)，然后 switch 将键入正确守护:

interface IModuleOneProps {
    moduleOneSpecificProp: string;
    commonProp: string;
    module_type: "module_one"
}
interface IModuleTwoProps {
    moduleTwoSpecificProp: string;
    commonProp: string;
    module_type: "module_two"
}
interface IContainerModuleProps {
    modules: Array<
    IModuleOneProps | IModuleTwoProps
    >;
}

public render() {
    const module = this.props.modules[1];
    switch (module.module_type) {
        case 'module_one':
            return <ModuleOne {...module} />;
        case 'module_two':
            return <ModuleTwo {...module} />;
    }
}

也完全可以对字符串文字使用枚举以避免依赖于魔术字符串:

enum MODULE_NAME {
  MODULE_ONE,
  MODULE_TWO
}

然后在界面和渲染方法中使用 MODULE_NAME.MODULE_ONE。