将布尔对象传递给反应中的子组件

Question

我正在尝试重构一些 react-typescript 代码，我想制作一个通用组件，并多次使用不同的参数调用它，而不是让多个组件以相同的方式工作。

所以我也在使用 redux，它的工作方式是在每个组件中调用 redux 状态，现在我想以不同的方式进行。我制作了一个名为 DrawerItems 的组件，并在其中定义了：

type DrawerItemProps = {
    open: boolean,
    tabs: boolean[],
  }

const DrawerItems = ({ open, tabs }: DrawerItemProps) => {
.
.
.
}

在我的父组件中我有

  const jaTabs = useSelector((state: TabState) => state.JA.tabs);
  const checkedOpen = useSelector((state: TabState) => state.JA.open);

然后我想将传递给我的子组件，例如：

<DrawerItems open={checkedOpen } tabs={jaTabs } />

这会产生错误：

Type '{ trunk: boolean; hip: boolean; knee: boolean; ankle: boolean; }' is missing the following properties from type 'boolean[]': length, pop, push, concat, and 29 more.

我的状态是这样的：

export interface TabState {
    ja: {
        open : boolean;
        tabs : {
            trunk: boolean;
            hip: boolean;
            knee: boolean;
            ankle: boolean;
        }
    }
    //=================
    fp: {
        open : boolean;
        tabs : {
            clearanceSwing: boolean;
            footOrientation: boolean;
        }
    }
    //=================
    gt: {
        open : boolean;
        tabs : {
            gaitWidth: boolean;
            centerOfMass: boolean;
            eCenterOfMass: boolean;
        }
    }
    //=================
    tm: {
        open : boolean;
        tabs : {
            gaitSpeed: boolean;
            stancePhaseDuration: boolean;
            swingPhaseDuration: boolean;
                }
    }
    //=================
    distance: {
        open : boolean;
        tabs : {
            stepLength: boolean;
            strideLength: boolean;
            distanceWalked: boolean;
        }
    }
}

如何正确地将布尔数组传递给我的子组件？我希望每次都能将选项卡传递给我 DrawerItem 我该怎么做？

Answer 1

在您的类型声明中，您将 tabs 声明为布尔数组

type DrawerItemProps = {
    open: boolean,
    tabs: boolean[],
  }

但是在您的界面中，您将选项卡声明为一个对象

export interface TabState {
    ja: {
        open : boolean;
        /// Here v
        tabs : {
            trunk: boolean;
            hip: boolean;
            knee: boolean;
            ankle: boolean;
        }
    }
// ...

类型错误基本上告诉您传递了错误的原型（对象而不是数组），这就是错误状态属性丢失的原因。

我不知道你的进一步实现是什么，所以你可以选择使用对象或数组。

Answer 2

我会用这种方式进行重构。您还尝试在数组类型

中分配对象类型

export interface Tabs {
   trunk: boolean;
   hip: boolean;
   knee: boolean;
   ankle: boolean;
 }
    

export interface TabState {
    ja: {
        open : boolean;
        tabs : Tabs
    }
    //=================
    fp: {
        open : boolean;
        tabs : {
            clearanceSwing: boolean;
            footOrientation: boolean;
        }
    }
    //=================
    gt: {
        open : boolean;
        tabs : {
            gaitWidth: boolean;
            centerOfMass: boolean;
            eCenterOfMass: boolean;
        }
    }
    //=================
    tm: {
        open : boolean;
        tabs : {
            gaitSpeed: boolean;
            stancePhaseDuration: boolean;
            swingPhaseDuration: boolean;
                }
    }
    //=================
    distance: {
        open : boolean;
        tabs : {
            stepLength: boolean;
            strideLength: boolean;
            distanceWalked: boolean;
        }
    }
}

并且在 React 组件中以这种方式传递类型

type DrawerItemProps = {
    open: boolean,
    tabs: Tabs,
  }

const DrawerItems = ({ open, tabs }: DrawerItemProps) => {
.
.
.
}

Answer 3

您收到错误消息是因为您向 tabs 提供了与实际不同的类型。这里，

tabs: boolean[]

你是说 tabs 是一个布尔数组。然而这里：

tabs : {
 trunk: boolean;
 hip: boolean;
 knee: boolean;
 ankle: boolean;
}

你是说 tabs 是一个带有这些键的对象。因此，您可以做的是创建一个界面，您可以将其导入 DrawerItems 组件：

export interface ITabs{
 trunk: boolean;
 hip: boolean;
 knee: boolean;
 ankle: boolean;
}

tabs: ITabs;

Answer 4

发生这种情况是因为您将类型为“TabState ja prop”的对象传递给 DrawerItems 选项卡参数，但将选项卡类型定义为 boolean[]。

您可以使用 generics

解决此问题

type DrawerItemProps<T> = {
    open: boolean,
    tabs: T,
}

function DrawerItems<T>({ open, tabs }: DrawerItemProp) {
.
.
.
}

或者使用带有 Lookup Types 的管道来提取 TabState 中的嵌套类型，如下所示：

type DrawerItemProps = {
    open: boolean,
    tabs: TabState['ja']['tabs'] |  TabState['fp']['tabs'] | TabState['gt']['tabs'] ...etc
}

将布尔对象传递给反应中的子组件

passing down boolean object to a child component in react

typescript

reactjs

redux