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

Question

有一个像这样输入的 React.FC 函数接收一个 useState 数组

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

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

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

但我只想传递一个数组而不是一个对象来解构 lambda props 中的数组而不是主体中的数组，就像这样

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

而不是这样

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

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

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

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

Answer 1

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

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

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

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

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

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

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

Can React.FC receive tuple as unnamed argument?