React中如何向dangerouslySetInnerHTML传递变量到Label组件？

你原来的写法存在两个核心问题：一是普通双引号包裹的字符串里的{currentyear}不会被JS解析为变量，只会当成普通文本；二是dangerouslySetInnerHTML是React原生DOM元素的特殊属性，不能直接作为值传给Label的text属性。以下是可直接落地的解决方案：

方案1：直接拼接HTML字符串（适合Label内部已支持HTML渲染的场景） #

如果你的Label组件内部已经对text属性做了dangerouslySetInnerHTML处理，只需要把变量正确拼接到HTML字符串里即可，推荐用ES6模板字符串实现：

// 先定义你的currentyear变量，示例为取当前年份
const currentyear = new Date().getFullYear();
// 用反引号包裹模板字符串，变量用${}插入
let text = `<p><span>Year ${currentyear}</span></p>`;
// 直接传拼接好的字符串给text属性
<Label text={text} />

如果不支持ES6语法，也可以用普通字符串拼接：

let text = "<p><span>Year " + currentyear + "</span></p>";

方案2：调整Label组件实现（如果当前Label不能渲染HTML） #

如果你的Label组件原本只是纯文本展示，内部没有处理HTML解析，需要先修改Label组件的逻辑，示例：

// 修改前的Label（只能展示纯文本，传入HTML会直接显示标签）
function Label({ text }) {
  return <span className="label">{text}</span>
}

// 修改后的Label（支持渲染传入的HTML字符串）
function Label({ text }) {
  return <span className="label" dangerouslySetInnerHTML={{__html: text}} />
}

注意：使用dangerouslySetInnerHTML有XSS注入风险，如果currentyear是用户可控制的变量，不要用这个方案。

方案3：更安全的实现（推荐，不需要处理HTML字符串） #

完全避免dangerouslySetInnerHTML，把结构作为子元素传入Label组件，变量可以直接解析：

const currentyear = new Date().getFullYear();
// 直接把结构作为Label的子元素传入
<Label>
  <p><span>Year {currentyear}</span></p>
</Label>

对应的Label组件调整为接收children属性即可：

function Label({ children }) {
  return <span className="label">{children}</span>
}

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