React使用querySelector获取动态生成ID报无效选择器错误如何解决

错误根因 #

该报错是CSS选择器的语法限制导致的：如果DOM元素的ID以数字开头，或者包含CSS选择器保留的特殊字符，直接拼接#${id}作为querySelector的入参不符合CSS选择器语法规范，因此抛出语法错误。

解决方案 #

1. 快速修复现有代码 #

将DOM查询方法替换为getElementById，该方法直接匹配ID字符串，不受CSS选择器语法限制：

function handleShowGifDemo(e) {
  var parent = e.currentTarget.parentNode.id;
  var staticImg = document.getElementById(parent); 
}

2. 更简便的原生DOM写法 #

你已经通过e.currentTarget.parentNode拿到了目标父元素的引用，完全不需要再通过ID二次查询DOM：

function handleShowGifDemo(e) {
  const staticImg = e.currentTarget.parentNode;
  // 后续直接操作staticImg即可
}

3. React场景最优解法（推荐） #

避免手动操作原生DOM，在列表渲染绑定事件时直接把当前项的ID传递给事件处理函数，不需要依赖事件对象爬取DOM节点：
首先修改事件绑定逻辑：

{gallery.map((value, key) => {
  return (
    <div id={value.tempid} className={value.tempid +" " +filtercategory +" col-xs-12 col-sm-6 col-md-3 text-center mb-5 align-items-stretch flex-column align-items-stretch gallery-box"} name="data_container" key={key}>
      <div className="demo-gif"></div>
      <div className="show-gif" onClick={() => handleShowGifDemo(value.tempid)}>
        <i className="far fa-play-circle"></i>
      </div>
    </div>
  )
})}

再修改事件处理函数，直接拿到对应ID：

function handleShowGifDemo(tempid) {
  // 这里直接获取到当前点击项对应的动态ID，不需要任何DOM查询操作
}

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