javascript - React JSX - 以粗体显示子字符串

Question

在创建自定义自动完成组件时，我遇到了这个问题:我得到了一个字符串和子字符串(字符串的第一部分，用户在自动竞争字段中输入的部分)，我需要在结果列表中以粗体显示该部分。

但我不能使用str.replace喜欢

    var re = new RegExp(find, 'g');
    return str.replace(re, '<b>'+find+'</b>');

因为它将返回字符串并且我需要 JSX。

所以基本上问题是 - 我有 JSX，我需要将其中的某些部分加粗。我需要一个接受 JSX 和注入(inject) <b> 的函数在特殊位置标记它

这就是我到目前为止所得到的

    boldJSX(str, find){
        if(!find) return str;
        return <span><b>{find}</b>{str.slice(find.length)}</span>
    }

Answer 1

我似乎为那些 future 来到这里的人找到了一种更加“ react ”的方法

function BoldedText({ text, shouldBeBold }) {
  const textArray = text.split(shouldBeBold);
  return (
    <span>
      {textArray.map((item, index) => (
        <>
          {item}
          {index !== textArray.length - 1 && (
            <b>{shouldBeBold}</b>
          )}
        </>
      ))}
    </span>
);
}