reactjs - 将事件侦听器添加到通过 API-REST 检索的 html 代码

Question

我目前正在学习 React JS。

在我正在做的项目中，我使用 Axios 从我的 API 中检索 HTML 内容。这是我正在检索的 HTML 代码的示例：

<p>Lorem ipsum <a href="#" class="hover-link" data-background="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png">amset doleres</a>, consectetur adipiscing elit. Ut tempor, nunc at tempus luctus, risus urna consequat eros, vel feugiat enim erat sed odio. Nulla purus ante, suscipit sed est non, lacinia ornare orci. In congue semper fermentum. Ut lacinia, <a href="#" class="hover-link" data-background="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/250px-Image_created_with_a_mobile_phone.png">neque bibendum convallis</a> ornare, turpis lorem interdum augue, in fermentum erat quam non nibh. Proin arcu elit, hendrerit sed felis ut, elementum vulputate metus. Curabitur sed <a href="#" class="hover-link" data-background="https://d1fmx1rbmqrxrr.cloudfront.net/cnet/optim/i/edit/2019/04/eso1644bsmall__w770.jpg">ipsum scelerisque</a>, pellentesque leo ac, dignissim erat. Duis non urna eleifend, maximus justo feugiat, consequat risus.</p>

我想在所有链接上添加事件侦听器，以便稍后检索数据背景。我已经在 Vanilla JS 中编写了一个完美运行的代码（请参见此处）......但我无法使其在 React 中运行，因为我不知道如何操作从 API-REST 检索到的 HTML 代码（添加点击/ mouseover / mouseout / ...）。

我被告知要使用 Ref... 但我不明白它如何帮助我。

你有什么想法 ？

提前谢谢你。

标签： reactjs

Answer 1

为了您的信息，我终于设法做我想做的事。

我在这里分享一个 CodeSandbox 链接：https ://codesandbox.io/s/reponse-question-15420864-udemy-cours-react-h2prog-nmbfr?file=/src/App.js给那些可能感兴趣的人！

请注意，这不是最好的解决方案......但它确实有效。似乎 Hooks 和/或 Ref 会更可取。我将尝试使用这两种解决方案之一来改进代码。

如果您有任何问题，请不要犹豫。

PS：非常感谢 Grafikart Discord 上的 @Ky 帮助我。

一个+