React中为段落指定文本设粗体的最优方案？复用组件加粗问题咨询

嘿，我明白你遇到的问题了——之前用字符串插值直接写<b>example</b>，结果渲染出来是纯文本而不是加粗效果，这其实是React的安全机制在起作用：它会自动转义HTML内容，防止XSS攻击，所以直接传标签字符串是行不通的。

下面给你几种最优的实现方式，尤其适合你这种需要复用组件、每个实例指定不同加粗单词的场景：

1. 拆分字符串+拼接JSX元素（最推荐，安全灵活） #

这个方法的核心是把原始文本拆分成「普通文本」和「需要加粗的文本」两部分，然后把加粗部分包装成React元素，最后拼接起来渲染。

你可以给复用组件加两个Props：text（完整的段落内容）和boldWords（需要加粗的单词数组），组件内部处理拆分和渲染逻辑：

import { Fragment } from 'react';

// 辅助函数：转义正则特殊字符（比如. * +这类）
const escapeRegExp = (string) => {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};

const HighlightedParagraph = ({ text, boldWords }) => {
  // 生成匹配所有目标单词的正则（gi表示全局+不区分大小写）
  const pattern = boldWords.map(word => escapeRegExp(word)).join('|');
  const regex = new RegExp(`(${pattern})`, 'gi');
  
  // 把文本拆分成交替的普通片段和加粗片段
  const textParts = text.split(regex);

  return (
    <p>
      {textParts.map((part, index) => {
        // 判断当前片段是否是需要加粗的单词（不区分大小写）
        const shouldBold = boldWords.some(
          word => part.toLowerCase() === word.toLowerCase()
        );
        
        return shouldBold ? (
          <b key={index}>{part}</b>
        ) : (
          <Fragment key={index}>{part}</Fragment>
        );
      })}
    </p>
  );
};

// 使用示例：每个组件实例可以指定不同的加粗单词
<HighlightedParagraph 
  text="React的组件复用能大幅提升开发效率，我们要学会合理封装可复用组件"
  boldWords={['React', '组件复用']}
/>

<HighlightedParagraph 
  text="在处理用户输入时，一定要注意XSS防护，避免安全风险"
  boldWords={['XSS防护']}
/>

为什么推荐这个方法？ #

• 完全符合React的渲染逻辑，没有安全风险
• 灵活性高：可以轻松替换成<strong>或者自定义样式的加粗组件
• 支持多单词、大小写不敏感匹配，还能处理带特殊字符的单词

2. 使用dangerouslySetInnerHTML（仅适用于完全可信的内容） #

如果你能100%确保段落内容是安全的（比如是你自己写的静态文本，不是用户输入的内容），可以用这个方法直接渲染HTML字符串，但非常不推荐在有用户输入的场景使用，因为会带来XSS攻击风险。

示例代码：

const BoldParagraph = ({ text, boldWords }) => {
  let processedText = text;
  boldWords.forEach(word => {
    const regex = new RegExp(escapeRegExp(word), 'gi');
    processedText = processedText.replace(regex, '<b>$&</b>');
  });

  // 注意：仅当内容完全可信时使用！
  return <p dangerouslySetInnerHTML={{ __html: processedText }} />;
};

总结 #

对于你的复用组件场景，第一种拆分字符串拼接JSX的方法是最优解——既安全又灵活，能完美支持每个组件实例指定不同的加粗单词，还能避免XSS风险。

内容的提问来源于stack exchange，提问作者jdip88