React dangerouslySetInnerHTML onClick不工作

Question

嗨，我是一个非常新的反应，只是试图添加由dangerouslySetInnerHTML内的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>
  );
}

Codesandbox example

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

Answer 1

正如注释中指出的(以及属性名称所指出的)，您应该尽可能地避免使用dangerouslySetInnerHTML (我想说的是，在您非常了解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不是最佳实践。我会听从亨利·伍迪的回答。