厦门网站制作品牌策划

遇到一个使用js es6的模板字符串进行事件绑定和传参的问题，这个问题的引起是因为使用innerHTML插入了一大串html并进行事件的绑定和传参。

以react为例，写一个demo记录一下

模板字符串中写方法的话需要用onclick来定义，传参需要这么写${char}，并且用字符串包裹中，否则会提示未定义的变量，如下：

`<span style="background-color: #a2efe6; cursor: pointer" onclick="onHandleClick('${char}')" >${char}</span>`

然后需要把这个方法挂载到window下才可以执行到，如下：

useEffect(() => {init();
}, [])const init = () => {(window as any).onHandleClick = (e) => {console.log('onHandleClick',e);}
}

其他框架的写法大同小异