javascript - 未捕获的 SyntaxError:模板字符串中的意外标识符
问题描述
我有一些 html 已转换为模板字符串,并在选中复选框时出现上述错误,我知道它与 ${currentRow} 有关,只是不确定为什么它会这样
function RowChecked(row) {
...
}
const currentRow = ds.find(f => f.ItemID === itemId);
return `<input id='${currentRow.Area}_${currentRow.ItemKey}' type='checkbox' class='checkbox' onChange='RowChecked(${currentRow})' />`;
解决方案
我不会这样做,但你需要使用 JSON.stringify
return `<input id='${currentRow.Area}_${currentRow.ItemKey}' type='checkbox' class='checkbox' onChange='RowChecked(${JSON.stringify(currentRow)})' />`;
但如果其中一个值包含 a '
,这将失败。
更好的解决方案是生成 DOM 元素并将它们添加到 DOM。您可以添加引用该对象的事件处理程序。
下一个最好的事情是建立一个 id 的映射/对象并通过 id 引用记录。
查看您的代码,您正在执行大量循环来查找记录。
ds.find(f => f.ItemID)
所以如果你只是把它变成一个对象,它就会变成一个简单的查找
const lookup = ds.reduce((acc, f) => { acc[f.ItemID] = f; return acc; }, {});
现在在您的代码中,您可以传递 id 并获取它。查找代码消失了,您只需通过 id 引用对象。
推荐阅读
- javascript - 挂钩声明依赖于声明 React 单选按钮中的其他值
- arduino - Arduino温度传感器值太高
- c++ - 视频流服务器 C++
- ruby-on-rails - 接受输入并比较与 Date.current rails 相同的格式
- java - 使用 PdfCleanUpTool 或 PdfAutoSweep 会导致一些文本变为粗体,线宽增加,双点变为心形
- c# - C# HttpClient 在 SendAsync 中冻结
- java - 注入 UriComponentsBuilder 还是使用静态 ServletUriComponentsBuilder?
- flutter - 除非我弹出屏幕并重新加载,否则无状态小部件不显示提供程序数据
- sql - 在Oracle SQL中按字符数拆分字符串
- python - 如何为其他方法封装类方法