React 使用预先确定的组件在字符串上添加 HTML 标签（替代危险的SetInnerHTML）

Question

I do not want to employ dangerouslySetInnerHTML and the objective here is to put bold tags around each instance of a word that appears in my string.

Convention React wisdom might suggest that something like this could work?

const Bold = (props) => {
   return (
      <b>
         {props.txt}
      </b>
   );
};

Here is where I try to incorporate the code

   if (longString.includes(searchTerm)) {
      longString = longString.replace(rest, <Bold txt={rest} />);
   }

Problem is it comes out as [object Object] instead of desired <b>searchTerm</b>

How do I do set up the string swap so that it doesn't print the word [object] but rather prints the object?

Answer 1

You could try renderToString from react-dom

import { renderToString } from 'react-dom/server'

if (longString.includes(searchTerm)) {
  longString = longString.replace(rest, renderToString(<Bold txt={rest} />) );
}