危險地反應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不是最佳實踐。 我會遵循亨利伍迪的回答。