Javascript 通过react类中的innerHTML添加onclick事件来调用函数

如何通过innerHTML在react类中添加onclick事件来调用函数

document.getElementById('activeEmployeesTableContent').innerHTML = `
                                    <tr>
                                      <td>${res.data.empId}</td>
                                      <td><button onclick = ${this.fun}>CLICK</button></td>
                                    </tr>
                                  `;

上面的代码不起作用，但我必须使用innerHTML将代码动态添加到表体中

  componentDidMount(){
     axios.post('http://localhost:5000/employeesRetrieval')
      .then( res => {
          document.getElementById('activeEmployeesTableContent').innerHTML = `
                                  <tr>
                                    <td>${res.data.empId}</td>
                                    <td><button onclick = ${this.fun(res.data.empid)}>CLICK</button></td>
                                  </tr>`;
      }).catch( err => {
        console.log(err);
      });
  }

---

react是完全不同的东西，您不能在普通html中添加react。

这似乎与react无关，但是，您通常会在定义innerHTML的同时单独添加onclick函数。如果这是您想要走的路线，我建议您使用domapi

const t = document.getElementById('table');
const row = document.createElement('tr');
const id = document.createElement('td');

// Set up the first element in the table
id.innerHTML = ele.empId;
row.appendChild(id);

// Set up the button
const btn = document.createElement('button');
btn.innerHTML = 'CLICK';
btn.addEventListener('click', func);
row.appendChild(btn);

// Add the row to the table.
table.appendChild(row);

---

这种方法过于必要，通常缺乏框架，因此我不建议这样做。React等框架的存在有助于管理复杂性。React为您处理与DOM的交互，以便您可以专注于应用程序的业务逻辑。

这是作为自定义元素中的内部代码使用的吗？我认为这是行不通的，因为react是一个强大的引擎，用于通过传输javascript呈现客户端组件。只是因为组件是功能组件，对吗？看起来HTMLish并不意味着它实际上是HTML。