嗨，我很新，只是試圖通過危險的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>
);
}
代碼沙盒示例
請幫助我理解為什么它不起作用
uj5u.com熱心網友回復：
您正在設定一個onClick偵聽器，即 HTML 中的 React。要在單擊事件后運行 javascript，最好使用該<button>元素。
嘗試這樣的事情：
const displayUrl = () => {
const str = ` <button onclick="${hello}">Click me</button> `
return <div dangerouslySetInnerHTML={{ __html: str }} />
};
請記住，使用dangerouslySetInnerHTML不是最佳實踐。我會遵循亨利伍迪的回答。
uj5u.com熱心網友回復：
正如評論中所指出的（以及屬性名稱所指示的），您應該盡可能避免使用dangerouslySetInnerHTML（我會說在您非常了解 React 之前不要使用它）。這里有一個簡單的 React 方法來onClick在元素上設定函式。
您需要使用 normal 渲染元素，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可以來自您想要的任何地方（例如道具或從某處獲取并保持狀態）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/352865.html
標籤：反应
上一篇：無法在React中顯示資料