时间戳

首页 > 解决方案 > React 中有没有办法更改道具类型以避免 TypeErrors？

javascript - React 中有没有办法更改道具类型以避免 TypeErrors？

问题描述

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

例如，如果我的组件希望接收一个对象（使用 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
}

标签： javascriptreactjstypescriptproperties

解决方案

您可能想要使用泛型类型。记录为：

软件工程的一个主要部分是构建组件，这些组件不仅具有定义明确且一致的 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', 'existing', 'array']
convert2Array({foo: 'bar', zip: 'zap'}); // ['bar', 'zap']

推荐阅读