如何在動態字符串的反應js中事件偵聽器或單擊偵聽器？

Question

我從服務器示例選項卡標記獲取動態字符串。我想在該標記上添加事件偵聽器或單擊偵聽器。 要將 HTML 轉換為反應組件，我使用這個npm module html to react https://www.npmjs.com/package/html-to-react

是否可以將點擊偵聽器添加到所有列表項或換句話說添加到所有li的

這是我的代碼

https://codesandbox.io/s/sleepy-bardeen-59dus?file=/src/App.js

import "./styles.css";

var HtmlToReactParser = require("html-to-react").Parser;

var htmlInput =
  '<div><h1>Title</h1><p>A paragraph</p><section class="rt01 rt01v0 cpad" data-trackas="rt01"><div class="rt01w1 cwidth"><ul class="rw-inpagetabs" data-ocomid="inpagetabs"><li><a href="#tab1">Lorem Ipsum</a></li><li><a href="#tab2">Ipsum 1</a></li><li><a href="#tab3">Ipsum 2</a></li><li><a href="#tab4">Ipsum 3</a></li><li><a href="#tab5">Ipsum 4</a></li></ul><!-- CONTENT PLACEHOLDER --></div></section></div>';
var htmlToReactParser = new HtmlToReactParser();
export default function App() {
  var reactElement = htmlToReactParser.parse(htmlInput);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {reactElement}
    </div>
  );
}

Answer 1

我沒有使用過這個包，但是在這種情況下利用事件冒泡怎么樣？

const clickHandler = event => {
  const li = event.target.closest('.rw-inpagetabs > li');

  if (li === null) return;

  // do something, for example:
  const tabLink = li.querySelector(':scope > a');
  console.log(tabLink.href);
};

return (
  <div className="App" onClick={clickHandler}>
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
    {reactElement}
  </div>
);