React 中有没有办法更改 prop 类型以避免 TypeErrors？

如何解决React 中有没有办法更改 prop 类型以避免 TypeErrors？

我想知道如果传递的类型不是预期的类型，是否有办法更改 prop 类型。

例如，如果我的组件希望接收一个对象（使用 PropTypes 或使用 TypeScript 表示法），但传递了一个数组，则应将该数组转换为一个对象（它可以是一个空对象）。

有办法存档吗？

示例：

const array = [1,2,3];

<Component name={array} />

然后在我的组件内部：

const Component({ name }) {

    console.log(typeof name);
    // output: 'string'  

    console.log(name);
    // output: ''

    return (
        <div />
    );
}

Component.propTypes = {
   name: PropTypes.string
}

解决方法

您可能想要使用 generic type。记录为：

软件工程的一个主要部分是构建不仅具有明确定义且一致的 API，而且还可以重用的组件。能够处理当前数据和未来数据的组件将为您提供构建大型软件系统的最灵活的功能。

在 C# 和 Java 等语言中，工具箱中用于创建可重用组件的主要工具之一是泛型，即能够创建可以在多种类型上工作的组件，而不是单一类型。这允许用户使用这些组件并使用他们自己的类型。

然后您可以转换为所需的类型：

const convert2Array = <T>(prop: T): T[] => {
    let arr: T[];
    if (Array.isArray(prop)) {
        arr = prop;
    } else if (typeof prop === 'object' && prop !== null) {
        arr = Object.values(prop);
    } else {
        arr = [prop];
    } 

    return arr;
};

convert2Array('str'); // ['str']
convert2Array(7); // [7]
convert2Array(['an','existing','array']); // ['an','array']
convert2Array({foo: 'bar',zip: 'zap'}); // ['bar','zap']

,

array 是 object 的子类型，因此在打字稿中将 array 作为 object 传递已经很好。

关于其他 prop 转换：您可以使用高阶组件来执行此操作，该组件采用“扩展”的 props 并将它们映射到它们的预期类型。打字稿类型并不太难。这变得棘手的部分是以这样一种方式编写它，即 javascript 代码知道要转换哪些 props，因为 typescript 类型在运行时被删除。

我提出的解决方案要求您指定要转换的道具的键。这不是我写过的最优雅的东西，但它确实有效！

const withExpandedProps = <Keys extends string,Converter extends (value: any) => any>(
  keys: Keys[],convert: Converter
) => <Props extends {}>(Component: React.ComponentType<Props>) => (
  props: Omit<Props,Keys> & Record<Keys,Expanded<Converter>>
) => {
  const newProps = Object.fromEntries(
    Object.entries(props).map(([key,value]) => {
      const mappedVal = (keys as string[]).includes(key)
        ? convert(value as any)
        : value;
      return [key,mappedVal];
    })
  ) as Props;

  return <Component {...newProps} />;
};

用作：

interface MyComponentProps {
  num: number;
  str: string;
  obj: object;
}

const MyComponent: React.FC<MyComponentProps> = ({ num,str,obj }) => {
  console.log({ num,obj });
  return (
    <div>
      <div>#{num}</div>
      <div>{str}</div>
      <ul>
        {Object.keys(obj).map((key) => (
          <li key={key}>{key}</li>
        ))}
      </ul>
    </div>
  );
};

const NewComponent = withExpandedProps(
  // all variables in javascript have a toString property
  ["str"],(value: any) => value.toString()
)(
  withExpandedProps(
    // convert strings to numbers -- might return NaN which is type number
    ["num"],(value: string | number) =>
      typeof value === "string" ? parseFloat(value) : value
  )(MyComponent)
);

const Test = () => (
  <NewComponent
    num={"5"} // string | number
    str={["one","two"]} // any
    obj={["one","two"]} // object
  />
);

（稍后将编辑更多解释）