Javascript React呈现字符串数组和JSX

我希望按照以下方式呈现JSX：

<p>
    Some text with a <span> match </span> in it
</p>

你知道我怎样才能解决这个问题吗

编辑：要了解如何使用它，请查看以下函数存根：

/**
 * prepares string with JSX span tags to assist with highlighting of search result matches 
 * @param {string} name string to find the match within
 * @param {string} matchString the search query string that we are highlighting against
 * 
 * @returns {Array} an array containing characters and JSX for syntax highlighting
 */
export const matchHighlighting = (name, matchString) => {...}

我知道搜索查询和响应文本，并希望向用户突出显示——我实际上试图编写一个函数，在必要时使用span标记插入字符串的内容，留下一个类似于我在顶部发布的示例的数组

这类问题突出；听起来很难找到好的解决方案？

使用React片段（在React v16.0中介绍）。这是

某些文本中有匹配项

---

p、 还有，为什么不把

放进去？

要解决与键相关的问题，您需要在每个数组元素上放置

key

属性。这样做，而不是

<p> {text} </p>

{text}

我们需要迭代数组，如下所示-

{text.map((el,index)=> {<p key={index}>{el}</p>})}

{text.map（（el，index）=>{
{el}
}）

我使用了@sophiebit's here。似乎有效：）

const matchHighlighting=（名称、匹配字符串）=>{
const re=new RegExp（`（\\b${matchString}+\\b）`，'gi'）；
const parts=name.split（re）；
对于（变量i=1；i
.match{
颜色：红色；
}

为什么它应该是一个数组？@devserkan因为我必须处理原始字符串“某个文本中有一个匹配项”，以插入指示我看到的高亮的标记。文本来自某个地方，你将其拆分，然后抓取匹配的单词，并在其中添加一个
span
，对吗？@devserkan是的——我想问题可以重新表述为“如何使用JSX插入字符串”，我现在不知道该怎么做：）但是如果你能解释一下你是如何得到这篇文章的，以及你现在正在做什么使它看起来像这样，那就更好了。也许更有经验的人可以为这种情况提供替代方案；原来的问题不是在p里面吗？我最终得到一个数据数组的原因是，这是我能够将JSX插入到字符串中的唯一方法。我的意思是，您可以编写一些文本，其中包含一个有意义的匹配项。它最终创建了比我想要的更多的JSX（因为它从一个带标签的字符串变成了一堆标签），但它仍然提供了解决问题所需的控制级别。谢谢
<React.Fragment>Some text with a <span>match</span> in it</React.Fragment>

<p> {text} </p>

{text.map((el,index)=> {<p key={index}>{el}</p>})}