javascript - 为整个React App制作通用函数

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

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

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

我当然知道明显的方法，手动添加 onClick 到每个 <a>在页面上的每个组件中都有 setState 逻辑，但是......这有点糟糕

我是 React 新手，也许有人可以给我指出正确的方向

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

Answer 1

嗯，在我看来，如果您想要 react 方式，那么您将需要创建一个具有已定义行为的演示组件，并使用该组件而不是 . 事实上，这实际上非常适合演示 react 组件。 然后，如果您需要实现任何更改，您可以在该组件内进行它们。

您也可以将普通js添加到索引页，但这有点错过了react的全部意义。