reactjs 将数组作为属性传递给子组件时，类型“{ }[]"无法赋值给类型”[]“

n7taea2i 于 2022-12-18 发布在 React

关注(0)|答案(3)|浏览(98)

我在react项目中定义了一个对象数组

const tabs = [
        {
            id: "1",
            tabTitle: "In Progress",
        },
        {
            id: "2",
            tabTitle: "Shipped",
        },
        {
            id: "3",
            tabTitle: "Canceled",
        },
    ];

这是一个MVC模式，我在控制器中定义了一个数组，将其作为 prop 传递给子组件，并将其Map到子组件中，但是Typescript对此有抱怨。

Type '{ id: string; tabTitle: string; }[]' is not assignable to type '[]'.
  Target allows only 0 element(s) but source may have more.ts(2322)

我将它传递给组件，如下所示：<UserOrdersTemplate tabs={tabs} />和子组件内的Map：

interface UserOrdersTemplateTypes {
    tabOpen?: (e: any) => void;
    currentTab: string;
    tabs: []
}

const UserOrdersTemplate: React.FC<UserOrdersTemplateTypes> = ({
    tabOpen,
    currentTab,
    tabs,
}) => {
    return (
        <>
            <ul id="tabs-tab">
                {tabs.map((tab, i) => (
                    <li className="nav-item" role="presentation" key={i}>
                        <button
                            id={tab.id}
                            onClick={tabOpen}>
                            {tab.tabTitle}
                        </button>
                    </li>
                ))}
            </ul>
        </>
    );
};

型
我可以做些什么来解决这个问题？

reactjs

来源：https://stackoverflow.com/questions/74823370/typescript-error-type-is-not-assignable-to-type-when-passing-an-arr

3条答案

按热度按时间

vq8itlhq1#

你举例的方式没有任何问题

import * as React from 'react';
import './style.css';

export default function App() {
  const tabs = [
    {
        id: 1,
        tabTitle: "In Progress",
    },
    {
        id: 2,
        tabTitle: "Shipped",
    },
    {
        id: 3,
        tabTitle: "Cancled",
    },
];
  return (
    <div>
      {
        tabs.map((tab, i) => (
          <li className="nav-item" role="presentation" key={i}>
            <button id={tab.id.toString()} onClick={()=>{}} >  {tab.tabTitle} </button>
          </li>
        ))
      }
    </div>
  );
}

但是，如果您使用单独的组件，那么，

import * as React from 'react';
import './style.css';

const Element = ({ id, tabTitle }) => (
  <li className="nav-item" role="presentation">
    <button id={id.toString()} onClick={() => {}}>
      {tabTitle}
    </button>
  </li>
);

export default function App() {
  const tabs = [
    {
      id: 1,
      tabTitle: 'In Progress',
    },
    {
      id: 2,
      tabTitle: 'Shipped',
    },
    {
      id: 3,
      tabTitle: 'Cancled',
    },
  ];
  return (
    <div>
      {tabs.map((tab, i) => (
        <Element {...tab} key={i} />
      ))}
    </div>
  );
}

//如果要给予显式类型，则

import * as React from 'react';
import './style.css';

type Tab = {
  id: number;
  tabTitle: string;
};

const Element: React.FC<Tab> = ({ id, tabTitle }) => (
  <li className="nav-item" role="presentation">
    <button id={id.toString()} onClick={() => {}}>
      {tabTitle}
    </button>
  </li>
);

export default function App() {
  const tabs: Tab[] = [
    {
      id: 1,
      tabTitle: 'In Progress',
    },
    {
      id: 2,
      tabTitle: 'Shipped',
    },
    {
      id: 3,
      tabTitle: 'Cancled',
    },
  ];
  return (
    <div>
      {tabs.map((tab, i) => (
        <Element {...tab} key={i} />
      ))}
    </div>
  );
}

型

赞(0）回复(0）举报 2022-12-18

jv4diomz2#

问题出在制表符数组的类型上。我定义了一个制表符的类型

type TabType = {
  id: string;
  tabTitle: string;
};

并将该类型赋给数组，如下所示：

const tabs: TabType[] = [
  {
    id: "1",
    tabTitle: "In Progress",
  },
  {
    id: "2",
    tabTitle: "Shipped",
  },
  {
    id: "3",
    tabTitle: "Canceled",
  },
];

并Map该数组，如下所示：

<ul id="tabs-tab">
    {tabs && tabs.map((tab, i) => (
        <li className="nav-item" role="presentation" key={i}>
            <button
                id={tab.id}
                onClick={tabOpen}>
                {tab.tabTitle}
            </button>
        </li>
    ))}
</ul>

型
它解决了问题。

赞(0）回复(0）举报 2022-12-18

t9aqgxwy3#

问题是您没有在UserOrdersTemplateTypes接口中定义选项卡的类型。
要解决此问题，请为Tab创建一个类型：

type Tab = {
    id: number;
    tabTitle: string;
};

然后在UserOrdersTemplateTypes接口内将选项卡定义更新为：

tabs: Tab[]

赞(0）回复(0）举报 2022-12-18

我来回答

reactjs 将数组作为属性传递给子组件时，类型“{ }[]"无法赋值给类型”[]“

3条答案

相关问题

热门标签

最新问答