React仿WordCounter应用：实现文本全加粗功能遇阻

你的问题出在text.bold()的使用方式和React的HTML渲染机制上：

• text.bold()本质是返回一个包裹了<b>标签的字符串，比如原文本是"hello"，调用后会得到<b>hello</b>。但React默认会转义所有HTML内容直接渲染成文本，所以你看到的会是带<b>标签的字符串，而不是加粗的文本。

两种可行的解决办法： #

方法1：使用dangerouslySetInnerHTML（注意风险）

如果你的文本输入是完全可控的（不会有用户输入的恶意内容），可以用这个属性让React解析HTML标签：

首先修改你的渲染部分，把原来直接输出{text}的地方改成：

<div dangerouslySetInnerHTML={{ __html: text }} />

你的handleBold函数可以保留原来的写法，但要注意如果重复点击会多次嵌套<b>标签，最好加个判断避免重复包裹。

方法2：用状态控制样式（推荐，更安全）

这种方式不需要处理HTML标签，通过CSS样式来控制文本加粗，完全规避XSS风险：

import { useState } from 'react';

function YourComponent() {
  const [text, setText] = useState('这里是你的文本');
  const [isBold, setIsBold] = useState(false);

  const handleBold = () => {
    setIsBold(!isBold);
  };

  return (
    <div>
      <div style={{ fontWeight: isBold ? 'bold' : 'normal' }}>{text}</div>
      <button className="btn btn-primary mx-1" onClick={handleBold}>Bold</button>
    </div>
  );
}

这种方法通过维护一个isBold状态，点击按钮时切换状态，然后用内联样式控制文本的粗细，逻辑更清晰也更安全。

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