如何解释此语法：{…{key}}？[副本]

Question

在下面的代码中，{…{key}}似乎在向html标记添加唯一的键索引，我认为这是React所需要的。但是这种语法是如何工作的呢？我对spread操作符很熟悉，但不知道如何将所有内容组合在一起。此链接https://reactjs.org/docs/lists-and-keys.html 给出了有关键用法的示例，但没有一个使用此语法。

const App = () => {
        const subStrings = testString.split(/(:.*?;)/)
        return (
          <div>
            {
              subStrings.map((s,key) => 
                /(:.*;)/.test(s) ? 
                <mark {...{key}}>{s.slice(1,-1)}</mark> :
                <span {...{key}}>{s}</span>
              )
            }
          </div>
        )
      }

Answer 1

语法{...{key}}通常用于传递动态道具，称为rest传播语法

这是它的一部分

const keys = 'xyz';
const props = { keys: keys}; // can also be written as const props = {keys};
...
<mark {...props}>{s.slice(1,-1)}</mark>

然而，这里真的不需要这种语法，可以简单地写为

<mark key={key}>{s.slice(1,-1)}</mark>