时间戳

首页 > 解决方案 > React.FC 可以接收元组作为未命名的参数吗？

reactjs - React.FC 可以接收元组作为未命名的参数吗？

问题描述

有一个像这样类型的 React.FC 函数，它接收一个 useState 数组

const TupleFn: React.FC<[boolean, (value: boolean) => void]> =
(([open, setOpen])) =>{}

我知道我可以使用对象类型并将数组道具命名为

{ control: [k, (value: k) => void] }

但我只想传递一个数组而不是对象来解构 lambda 道具中的数组而不是正文，就像这样

(([open, setOpen]) => {}

而不是这样

(control) => {
   [open, setOpen] = control
}

尝试使用 rest props 语法传递元组 props (...)

<TupleFn {...[open, setOpen]} />

它将数组转换为对象，因此不能将其解构为数组

标签： reactjstypescripttuples

解决方案

如果您只想解构 lambda 参数中的数组，可以这样做：

const TupleFn: React.FC<{control: [boolean, (value: boolean) => void]}> =
({control: [open, setOpen]}) =>{return <div></div>}

如果你真的想传递一个数组作为道具，你可以直接使用 React.createElemet。我不认为 JSX 可以以某种方式转换以将未命名的数组作为道具传递（文档中没有提及）。像这样的东西：

<div>
    {React.createElement(TuppleFn, [open, setOpen])}
</div>

然后像这样编写功能组件：

({0: open, 1: setOpen}) => {...}

使用站点出现奇怪语法的原因是因为 React 会自动将任何作为 props 传递的非对象值包装到 {0: foo, 1: bar, ...} 形式的对象中，所以你必须像这样解开它所以。否则，您将遇到与解构不可迭代对象相关的运行时错误。

推荐阅读