React中如何在JS模板字面量中传递字符串类型Props

错误原因 #

当你传入i='lmao'时，模板字面量生成的href内容是javascript:console.log(lmao)——这里的lmao被当作变量解析，但全局环境中并没有定义这个变量，因此抛出ReferenceError。而传入数字5时，console.log(5)是合法的数字字面量调用，所以能正常运行。

解决方案 #

方案1：手动添加引号（简单场景可用）

直接在模板字面量里给props.i包裹单引号，让生成的JS代码把值识别为字符串：

function Yuh(props) {
    return <a href={`javascript:console.log('${props.i}')`}>{props.i} <h2>a</h2></a>
}

⚠️ 注意：如果props.i本身包含单引号（比如i="it's me"），会导致JS语法错误，这种场景不适用该方案。

方案2：用JSON.stringify处理（通用安全）

JSON.stringify会自动为字符串添加双引号，同时处理内部特殊字符的转义，适配所有合法字符串场景：

function Yuh(props) {
    return <a href={`javascript:console.log(${JSON.stringify(props.i)})`}>{props.i} <h2>a</h2></a>
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Yuh i='lmao' />);

生成的href内容为javascript:console.log("lmao")，lmao会被当作字符串字面量解析，不会报错。

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