Question

我想要呈现如下所示的JSX：

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

我的想法是准备这样的数据：

var text = ["Some text with a", <span>match</span>, "in it"]
return <p> {text} </p>

但这会导致React跟踪缺少密钥的迭代子项产生问题。

Each child in an array or iterator should have a unique "key" prop.

有什么办法可以解决这个问题吗？

编辑：要了解其用法，请查看以下功能存根：

/**
 * 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 issues thread突出了问题；听起来像是一个艰难的难题，还没有真正找到好的解决方案？

Answer 1

要解决与键有关的问题，需要在每个数组元素上放置key属性。为此，而不是

<p> {text} </p>

我们需要像这样遍历数组-

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

Answer 2

我在这里使用了@sophiebit的solution。似乎正在工作：）

const matchHighlighting = (name, matchString) => {
  const re = new RegExp(`(\\b${matchString}+\\b)`, 'gi');
  const parts = name.split(re);
  for (var i = 1; i < parts.length; i += 2) {
    parts[i] = <span className="match" key={i}>{parts[i]}</span>;
  }
  return <div>{parts}</div>;
}

const name = "Some text with a, match in it";
const matchString = "match";

class App extends React.Component {
  render() {
    return <div>{matchHighlighting(name, matchString)}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.match {
  color: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

使用React Fragments（在React v16.0中引入）。这是link to documentation

<React.Fragment>Some text with a <span>match</span> in it</React.Fragment>

p.s。还有为什么不只放在<p>里面呢？

React渲染字符串数组和JSX

3 个答案: