危险地反应SetInnerHTML onClick 不起作用

Question

嗨，我很新，只是试图通过危险的SetInnerHTML 在html 渲染中添加onClick

这是代码示例

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

export default function App() {
  const hello = (event) => {
    alert("hello", event.target);
  };
  const displayUrl = () => {
    const str = `<a onClick=${hello} href="#">Test</a>`;
    return <div dangerouslySetInnerHTML={{ __html: str }} />;
    //return `<a href='#'>Test</a>`;
  };

  return (
    <div className="App">
      <React.Fragment>{displayUrl()}</React.Fragment>
    </div>
  );
}

代码沙盒示例

请帮助我理解为什么它不起作用

Answer 1

正如评论中所指出的（以及属性名称所指示的），您应该尽可能避免使用dangerouslySetInnerHTML SetInnerHTML（我会说在您非常了解 React 之前不要使用它）。 这里有一个简单的 React 方法来设置元素上的onClick函数。

您需要正常使用onClick渲染元素，并将onClick作为道具传递。

例如：

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

export default function App() {
  const hello = (event) => {
    alert("hello", event.target);
  };

  return (
    <div className="App">
      <button onClick={hello}>Click here</button>
    </div>
  );
}

---

使用链接（正如您的沙箱和问题所建议的那样），您可以使用a元素并将href设置为所需的 URL。

例如：

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

export default function App() {
  const url = "http://example.com"

  return (
    <div className="App">
      <a href={url}>Click here</a>
    </div>
  );
}

并且url可以来自您想要的任何地方（例如道具或从某处获取并保持状态）。

Answer 2

您正在设置一个onClick侦听器，它是 HTML 中的 React。 要在单击事件后运行 javascript，最好使用<button>元素。

尝试这样的事情：

const displayUrl = () => {
  const str = ` <button onclick="${hello}">Click me</button> `
  return <div dangerouslySetInnerHTML={{ __html: str }} />
};

请记住，使用dangerouslySetInnerHTML不是最佳实践。 我会遵循亨利伍迪的回答。