Javascript 使用onclick从字符串html访问方法

下面我创建了一个演示我所面临的确切问题，我想访问测试方法，但我认为它不与onclick事件绑定，因为每次重新呈现警报时，我都会尝试这样做 onclick=

${（）=>test（）}

但是它的给出错误。有人能帮我告诉我使用这个函数访问test（）方法的正确方法吗

import React from "react";
import "./style.css";

export default function App() {
  const test = () => {
    alert('hi');
  }
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <div dangerouslySetInnerHTML={{__html: `
      <button onclick=${test()}>Test</button>`}}></div>
    </div>
  );
}

从“React”导入React；
导入“/style.css”；
导出默认函数App（）{
常数测试=（）=>{
警报（“hi”）；
}
返回(
你好，斯塔克布里兹！
开始编辑以查看发生的奇迹：）

);
}

这里有两个截然不同的问题

首先，您有一个模板字符串，其中包括

${test（）}

。这将用立即调用的返回值

test（）

替换

${…}

的内容

您需要在那里放置一个JavaScript字符串（例如

onclick=“test（）”

）

然后，将使用click事件来评估JS

---

因此，下一个问题是：

test

变量的作用域是它在其中声明的函数

无法从

onclick

属性访问它，该属性将在完全不同的范围内进行计算

因此，您需要将函数复制到可用的作用域中

可能（，但不要这样做））与以下内容相关：

useEffect(() => {
    window.test = test;
    return () => {
        delete window.test;
    }
})

然后它将在

onclick

属性的范围内

您只是遇到了一系列涉及名称冲突的其他问题，因此您需要做额外的工作，以确保全局

测试
是唯一的


更安全的选择是避免使用
onclick
属性并使用
addEventListener

不幸的是，因为您是一个很难应用的HTML字符串。因此，您可以
useRef
获取对包含元素的引用，并使用委托事件处理程序捕获单击：

（未经测试）

我不知道它是否得到了良好的实践，但至少现在它解决了我的问题，我创建了一个GlobalEventHandlers.onclick并使用它触发了我想要的函数

import React from "react";
import "./style.css";

export default function App() {
  const test = () => {
    alert("hi");
  };
  window.myFunction = () => {
    test();
  };
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <div
        dangerouslySetInnerHTML={{
          __html: `
      <button onclick="myFunction()">Test</button>`
        }}
      />
    </div>
  );
}

从“React”导入React；
导入“/style.css”；
导出默认函数App（）{
常数测试=（）=>{
警报（“hi”）；
};
window.myFunction=（）=>{
test（）；
};
返回(
你好，斯塔克布里兹！
开始编辑以查看发生的奇迹：）

);
}
我很感谢您的回答，但问题是上面是我的场景，在实际代码中，有太多的迭代和嵌套以及函数的各种参数，因此我无法使用addEventListener，我只需要使用onclick事件，尽管感谢您的帮助answer@Adarsh-我提供了三种解决方案。第一种方法是使用
onclick
属性。啊，是的，现在我看到我做了类似的事情，对此表示感谢……我所说的正是最简单的方法。是的，我没有看到你的第一种方法，但是的，这对我有效
export default function App() {
  const test = () => {
    alert('hi');
  }
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <div>
          <button onClick={test}>Test</button>`}}>
      </div>
    </div>
  );
}

import React from "react";
import "./style.css";

export default function App() {
  const test = () => {
    alert("hi");
  };
  window.myFunction = () => {
    test();
  };
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <div
        dangerouslySetInnerHTML={{
          __html: `
      <button onclick="myFunction()">Test</button>`
        }}
      />
    </div>
  );
}