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>
);

如何在动态字符串的反应js中事件侦听器或单击侦听器？

1 个答案: