html-react-parser无法解析select标签的onChange函数求助

问题根源 #

html-react-parser 和 dangerouslySetInnerHTML 都只能处理静态HTML字符串，无法将字符串中的JavaScript事件处理函数（比如你写的onChange回调）转化为真正可执行的React事件绑定——这些函数在字符串里只是普通文本，会被当作HTML内容的一部分渲染出来，而非绑定到元素上。

正确解决方案：直接用JSX动态生成元素 #

React的核心就是用JSX结合JavaScript逻辑动态构建UI，完全不需要拼接HTML字符串再解析。把你的循环逻辑改成JSX写法即可：

return (
  <tr>
    <th>Details</th>
    {envsToCommitsHolder.map((item, j) => {
      const repoName = realRepoName[j + 1];
      return (
        <th key={repoName}>
          <select 
            onChange={(event) => handleOptionSelection(event.target.selectedOptions)} 
            id={repoName}
          >
            <option>{repoName}</option>
            {item.val.map((optionText, h) => (
              <option key={h} value={h}>{optionText}</option>
            ))}
          </select>
        </th>
      );
    })}
  </tr>
);

可选方案：用html-react-parser的transform选项（不推荐） #

如果一定要保留字符串拼接的方式，可以利用html-react-parser的transform选项手动给select元素绑定事件，但这种写法冗余且不符合React最佳实践：

// 先按原来的方式拼接不含onChange的HTML字符串
let selectOptions = "<th>Details</th>";
for(var j=0;j<envsToCommitsHolder.length;j++){
  selectOptions += `<th><select id="${realRepoName[j+1]}"><option>${realRepoName[j+1]}</option>`;
  for(var h=0;h<envsToCommitsHolder[j].val.length;h++){
    selectOptions += `<option value="${h}">${envsToCommitsHolder[j].val[h]}</option>`;
  }
  selectOptions += "</select></th>";
}

// 配置transform选项，给select添加事件
const parseOptions = {
  transform: (node) => {
    if (node.name === 'select' && node.attribs.id) {
      return (
        <select 
          id={node.attribs.id}
          onChange={(event) => handleOptionSelection(event.target.selectedOptions)}
        >
          {node.children}
        </select>
      );
    }
  }
};

return parse(selectOptions, parseOptions);

关键提醒 #

dangerouslySetInnerHTML完全不适合这个场景，它只能渲染纯静态HTML，无法处理任何JavaScript交互逻辑，使用它不仅解决不了问题，还会引入XSS风险。

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