React应用中span标签open属性值无法渲染的问题咨询

问题原因 #

React处理JSX时会过滤非标准HTML属性，你使用的open、close不属于span标签的标准属性，会被自动忽略，所以最终HTML输出里看不到它们；而普通HTML对自定义属性没有限制，因此能正常显示。

解决方案 #

1. 使用data-*规范自定义属性（推荐）

这是React官方推荐的自定义属性写法，兼容性和安全性都更优：

<div>
  <span data-open="(" data-close=")">
    <span>x2+y2</span>
  </span>
  <span>=z2</span>
</div>

渲染后的HTML会保留data-open和data-close属性，后续通过JavaScript获取时，可使用element.dataset.open、element.dataset.close访问属性值。

2. 直接插入HTML字符串（谨慎使用）

如果必须保留原属性名（比如要兼容已有的CSS或JS逻辑），可以用dangerouslySetInnerHTML直接注入HTML内容：

<div dangerouslySetInnerHTML={{ __html: `
  <span open="(" close=")">
    <span>x2+y2</span>
  </span>
  <span>=z2</span>
`}} />

⚠️ 注意：这个方法存在XSS风险，仅当插入的HTML内容完全由你可控、无用户输入时才能使用。

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