时间戳

首页 > 解决方案 > React 使用预先确定的组件在字符串上添加 HTML 标记（替代 dangerouslySetInnerHTML ）

javascript - React 使用预先确定的组件在字符串上添加 HTML 标记（替代 dangerouslySetInnerHTML ）

问题描述

我不想使用危险的SetInnerHTML，这里的目标是在我的字符串中出现的每个单词实例周围放置粗体标签。

约定 React 智慧可能表明这样的事情可以工作？

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

这是我尝试合并代码的地方

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

问题是它作为[object Object]而不是所需的<b>searchTerm</b>

如何设置字符串交换，使其不打印单词 [object] 而是打印对象？

标签： javascriptreactjsreact-native

解决方案

你可以尝试renderToString从react-dom

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

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

推荐阅读