ReactJs 中没有调用函数答案

【问题标题】：Function is not getting called in ReactJsReactJs 中没有调用函数
【发布时间】：2023-02-22 01:44:29
【问题描述】：

我有以下代码。

if (response.ok) {
  response.json().then((data: any) => {
    //use data
    console.log(data.value);
    let strFilesDisplayTable = "";
    strFilesDisplayTable =
      "<table border='1'> <tr> <th> Name </th> <th > Uploaded Date </th> <th > Role </th>  <th > Remove </th></tr>";
    for (var c = 0; c < data.value.length; c++) {
      var dateVal = new Date(data.value[c].TimeCreated);
      var docIdVal = data.value[c].ListItemAllFields["Role"];
      let dateTimeCreatedMod =
        dateVal.getDate().toString() +
        "/" +
        (dateVal.getMonth() + 1).toString() +
        "/" +
        dateVal.getFullYear().toString();

      strFilesDisplayTable =
        strFilesDisplayTable +
        "<tr> <td > " +
        data.value[c].Title +
        " </td> <td>" +
        data.value[c].Title +
        " </td> <td style='padding:5px;'> " +
        dateTimeCreatedMod +
        " </td> <td style='padding:5px;'> " +
        data.value[c].ListItemAllFields["Role"] +
        "  </td> <td> <button class='btnDelDoc'  onClick={this.tempFunDel(" +
        data.value[c].ListItemAllFields["ID"] +
        ")}> Delete </button> </td> </tr> ";
    }
    strFilesDisplayTable = strFilesDisplayTable + "</table>";
    document.getElementById("showFilesDiv").innerHTML = strFilesDisplayTable;
  });
}

我的功能是

public tempFunDel(idVa){ alert("Id is !" +idVa); }

它为我呈现一张桌子。当我点击删除按钮时，没有任何反应 function "tempFunDel" 没有被调用。请建议一种解决方法来调用 HTML 字符串中的函数。

提前致谢。

【问题讨论】：

我不确定我是否理解。这是 React，但你正在用字符串构建 HTML 并手动设置它？！
切线，但 400 多个字符的行是......滚动式。
您将需要评估字符串
你要求社区贡献他们的时间来帮助你。您至少可以正确格式化代码吗？
@DaveNewton 更像 scroll-x :D

标签： javascript html reactjs typescript function

【解决方案1】：

在 React 中使用字符串组装 HTML 并使用 innerHTML 属性更新 DOM 是一种反模式。相反，组件接受属性并直接使用内联 JSX 构造 HTML 元素。跑步下面的演示可以在您自己的浏览器中查看一个最小的、可重现的示例。

function Table({ cols = [], rows = [] }) {
  return (
    <table>
      <thead>
       <tr>
         {cols.map((c, key) =>
           <td key={key}>{c}</td>
         )}
       </tr>
      </thead>
      <tbody>
        {rows.map((r, key) =>
          <tr key={key}>
            {cols.map((c, key) =>
              <td key={key}>{r[c]}</td>
            )}
          </tr>
        )}
      </tbody>
    </table>
  )
}

const data = [
  { name: "Alice", age: 30 },
  { name: "Bob", age: 40 },
  { name: "Charlie", age: 50 },
]

ReactDOM.createRoot(document.querySelector("#app")).render(
  <Table cols={["name", "age"]} rows={data} />
)

thead { font-weight: bold; }
tr ~ tr td { border-top: 1px solid silver; }

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

【讨论】：