html-react-parser 不会在 select 标签上解析 onChange function

Question

我正在尝试在循环中动态创建多个 select 下拉菜单。 当其中只有纯 html 时，html-react-parser 工作正常。 但是，当我将 onChange function 添加到 select 标记时，它无法正确解析该部分。 它实际上似乎只是无视它。

 let selectOptions = "<th>Details</th>";
 for(var j=0;j<envsToCommitsHolder.length;j++){
        selectOptions += "<th><select onChange={(event) => {handleOptionSelection(event.target.selectedOptions)}} id="+realRepoName[j+1]+"><option>"+realRepoName[j+1]+"</option>";       
        for(var h=0;h<envsToCommitsHolder[j].val.length;h++){
          console.log(realRepoName[j+1]);
          console.log(envsToCommitsHolder[j].val[h]);    
          //var value = envsToCommitsHolder[j].val[h];      
          selectOptions += "<option value="+h+">"+envsToCommitsHolder[j].val[h]+"</option>";          
        }
        selectOptions += "</select></th>";      
      }     
      return parse(selectOptions);     

请查看所附图片以查看其渲染方式。 它将 javascript 完全放在 select 标签之外。 还有其他方法我应该这样做吗？ 我附上了带有 onChange 的 select 如何在浏览器上呈现的图像 ->有问题的部分。 我还看到有一个“dangerouslySetInnerHTML”来解析字符串并从中呈现 html，但我不确定如何使用它或者它在这种情况下是否有用。 任何帮助将不胜感激。 我非常坚持这个。

Answer 1

我创建了一个沙箱来动态渲染 select 选项，你可以自定义渲染， https://codesandbox.io/s/react-typescript-forked-8psy13?file=/src/App.tsx
React基础知识：useState, useEffect 有问题可以在这里问我