React - 在父节点中包装多个元素

Question

我有以下组成句子的单词数组：

let words = [
  {
    "start_time": "2.54",
    "end_time": "3.28",
    "alternatives": [
      {
        "confidence": "1.0",
        "content": "Hello",
        "__typename": "Alternative"
      }
    ],
    "type": "pronunciation",
    "__typename": "TranscriptItems"
  },
  {
    "start_time": null,
    "end_time": null,
    "alternatives": [
      {
        "confidence": "0.0",
        "content": ".",
        "__typename": "Alternative"
      }
    ],
    "type": "punctuation",
    "__typename": "TranscriptItems"
  },
  {
    "start_time": "3.29",
    "end_time": "3.52",
    "alternatives": [
      {
        "confidence": "1.0",
        "content": "This",
        "__typename": "Alternative"
      }
    ],
    "type": "pronunciation",
    "__typename": "TranscriptItems"
  }
]

我也有这个变量，其中包含从上面的单词中选择的 sn-ps 数组：

const snippets = [{ start: 2.54, end: 4.00, id: 12, snippetTitle: "This is the title" }];

现在我通过简单的.map 显示单词并为每个单词返回<span>s。

我想要完成的是：如果我当前的跨度在来自 snippets 变量的 sn-p 之间，请将其包装在另一个 div/组件中，以便我可以突出显示它。

因此，我可以将两个跨度都包装在一个新的包装器组件或 div 中，而不是 <span>Hello</span>.<span>This</span><Highlight><span>Hello</span>.<span>This</span></Highlight>

Answer 1

你可以使用reduce函数做这样的事情：

export default myComponent = () => {
    let cache = [];
    return (
        <>
            {myArray.reduce((accumulator, currentValue) => {
                if(!isInSnippets(currentValue)){
                    if(cache.length > 0){ // return the cached value for highlight
                       accumulator.push( (<Highlight>
                                             {cache.map((elt, i) => <span key={i}>{elt}</span>)
                                          </Highlight>));
                       cache = [];
                    }
                    accumulator.push(<span>{currentValue}</span>);
                }
                else cache.push(currentValue);
                return accumulator;
            }}
        </>
    )
}

累加器将包含一个 jsx 元素数组。常规元素将包含在 span 中，而 Highlighted 元素将一起包含在 Highlight 组件中。

我们将突出显示的元素存储在 cache 变量中。当我们面对一个“常规”元素时，我们会检查缓存中是否有东西。如果有，我们将它们全部放在一个高亮元素中，并将其添加到缓存中。然后我们添加“当前”常规值。