使整个App React具有通用功能

Question

考虑这个函数(这只是一个例子(：

function highlight(el) {
el.style.transition = "background-color 0.5s";
el.classList.add("highlight");
setTimeout(() => {
el.classList.remove("highlight");
setTimeout(() => {
el.style.transition = "";
}, 500);
}, 500);
}
document.getElementsByTagName("a").addEventListener("click", function () { highlight(this) });    

这是一个"通用函数"，它在页面加载时自动绑定到每个<a>，它很短(只有几行长(，我可以在几秒钟内添加或删除它(页面上的代码完好无损(。

在React App中实现它的最佳方法是什么？

当然，我知道一个显而易见的方法，用setState逻辑在页面上的每个组件中手动添加onClick到每个<a>，但是。。。它有点糟糕

我是React的新手，也许有人能给我指明正确的方向

如何在每个页面(每个具有<a>的组件(上高效地实现此逻辑，并在不再需要时轻松删除它？

Answer 1

好吧，在我看来，如果你想要反应方式，那么你会想要创建一个具有定义行为的演示组件，并使用该组件而不是。事实上，这将是一个完美的表现反应组件。然后，如果您需要实现任何更改，您可以在该组件中执行这些更改。

您也可以在索引页中添加vanilla-js，但这有点忽略了react的全部要点。

Answer 2

如果您当前正在开发此应用程序，那么最好的方法是为其创建一个小型组件。例如，您可以创建一个组件HighligtedAnchor，并可以直接实现其中的风格特征。

其次，如果你直接想处理很多锚点，那么最合适的地方应该是你的应用程序的根，通常是App.js，或者如果你真的想继续使用平面js方法，你也可以把它写在index.html中。

Answer 3

如果您正在寻找像旧jquery live这样的好东西，那么在reactjs中无法做到这一点。您能做的最好的事情就是创建一个封装<a>标记的自定义组件。并在任何使用常规<a>标记的地方使用自定义组件。