React.FC 可以接收元组作为未命名参数吗？答案

【问题标题】：Can React.FC receive tuple as unnamed argument?React.FC 可以接收元组作为未命名参数吗？
【发布时间】：2021-09-15 08:44:11
【问题描述】：

有一个这样类型的 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]} />

它将数组转换为对象，所以它不能被解构为数组

【问题讨论】：

我认为将元组作为道具传递是不明智的，因为React.FC<proptype> 将使用可选的proptype 属性增加children，这意味着它将假定它已经获得了一个对象
@apokryfos 这是可以理解的，并清楚地表明它无法实现，正如建议的那样

【解决方案1】：

如果你只是想解构 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, ...} 形式的对象中，所以你必须像这样打开它。否则，您将遇到与解构不可迭代对象相关的运行时错误。

【讨论】：