React结合SCSS时replace()方法中span样式不生效问题求助

咱先明确核心问题：你用replace()返回的是HTML字符串，但React出于安全考虑会自动转义所有字符串内容——也就是说，你写的<span style="...">或者<span class="b">会被当成纯文本显示，根本不会被解析成真实的DOM元素，样式自然就不生效啦。

下面给你两种可行的解决方案：

方案1：使用dangerouslySetInnerHTML（快速但注意安全） #

这个方法可以让React直接解析并渲染HTML字符串，但要注意：如果inputValue是用户输入的内容，可能存在XSS风险，一定要做好输入校验！

修改后的React代码示例：

<Transition in={show} timeout={100}>
  {show => (
    <div style={{ ...defaultStyle, ...transitionStyles[show] }}>
      {!suggestions || suggestions.length === 0 ? (
        errorMessage
      ) : (
        suggestions.map((place, index) => {
          const regex = new RegExp(inputValue, 'gi');
          // 生成带HTML的字符串，用SCSS类名或内联样式都可以
          const cityNameHtml = place.city.replace(regex, '<span class="b">$&</span>');
          return (
            <div key={index} dangerouslySetInnerHTML={{ __html: cityNameHtml }} />
          );
        })
      )}
    </div>
  )}
</Transition>

SCSS保持不变：

.b { font-weight: bold; }

方案2：拆分字符串为React元素数组（更安全的React式写法） #

这种方法完全避免使用HTML字符串，而是把原字符串拆分成“匹配部分”和“非匹配部分”，然后组装成React元素数组，更符合React的设计理念，也没有XSS风险。

代码示例：

<Transition in={show} timeout={100}>
  {show => (
    <div style={{ ...defaultStyle, ...transitionStyles[show] }}>
      {!suggestions || suggestions.length === 0 ? (
        errorMessage
      ) : (
        suggestions.map((place, index) => {
          const regex = new RegExp(inputValue, 'gi');
          // 拆分字符串为非匹配片段数组
          const citySegments = place.city.split(regex);
          // 收集所有匹配到的内容
          const matches = [...place.city.matchAll(regex)];
          // 组装成React元素数组
          const cityElements = [];
          citySegments.forEach((segment, segIndex) => {
            // 先添加非匹配的文本片段
            if (segment) cityElements.push(segment);
            // 再添加带样式的匹配片段（如果还有未处理的匹配项）
            const match = matches[segIndex];
            if (match) {
              cityElements.push(
                <span key={`${index}-${segIndex}-match`} className="b">
                  {match[0]}
                </span>
              );
            }
          });
          return <div key={index}>{cityElements}</div>;
        })
      )}
    </div>
  )}
</Transition>

SCSS同样保持不变即可。

为什么原来的写法不行？ #

React默认会将所有字符串类型的子节点转义为纯文本，目的是防止XSS攻击。所以你之前写的place.city.replace(regex, '<span style={{color...}}>')最终只会在页面上显示成带<span>标签的文本，而不是真正的DOM span元素，样式自然无法应用。

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