javascript - 如何在 React.js 中将文本的一部分加粗？

Question

我正在构建一个搜索组件，对于每个可能的自动建议，我想突出显示搜索词出现的位置。

我找到了this我一直在尝试使用正则表达式来实现我想要的结果，但我认为组件工作方式中的某些东西阻止了它工作，而且我不知道如何让它工作。

这就是我正在尝试做的事情:

var reg = new RegExp(searchTerm, "gi");


return (
  <div className="single-result">
      {result.name.replace(reg, searchTerm => {
        return <div className="single-result__bold"> {searchTerm}</div>;
      })}
  </div>
);

但是我打印出来的内容是这样的:

[object Object]A[object Object]d[object Object]a[object Object]l[object Object]i[object Object]n[object Object]e[object Object] [object Object]A[object Object]r[object Object]r[object Object]a[object Object]u[object Object]l[object Object]t[object Object]

Answer 1

replace 函数不是为与 JSX 一起使用而构建的，它会将虚拟 DOM 节点转换为字符串。

string.replace 的此重载期望其第二个参数是返回字符串的函数(如果不是，则将其转换为字符串)。在本例中，您将从该函数返回一个 JSX 节点，当它通过 .toString() 时显示为 [object Object] - replace 函数然后将不匹配的字符串与函数的输出(即上面显示的字符串)连接起来。这个狡猾的字符串是输出到 React 的内容，所以这就是它渲染的内容。

相反，您可以使用重复调用string.search(或在较低级别的regex.match)来找出每个匹配项的索引(以及匹配自身)，然后输出不匹配文本和匹配文本的 DOM 节点的数组。

这样的数组可能看起来像:

[
   "This text surrounds a ",
   <div className="single-result__bold">match</div>,
   ", but is still in a normal text node"
];

然后可以在react/JSX中渲染上面的数组，并按照您的预期显示。