应用样式“;游标:指针”;所有具有onClick功能的React组件

Apply style "cursor: pointer" to all React components with onClick function

本文关键字：onClick 功能 组件 React 样式 游标 应用 指针      更新时间：2023-09-26

我想将样式cursor:pointer应用于所有具有onClick函数的React元素。我知道我可以对每一个元素都这样做：

<a onClick={handleClick} style={{cursor:'pointer'}}>Click me</a>

或者这个：

<a onClick={handleClick} className="someClassWithCursorPointer">Click me</a>

但我更希望能够这样做，将样式应用于所有元素：

<style>
 [onclick] {
   cursor: pointer; 
  }
</style>

但这不起作用，因为在使用React的onClick属性时，元素的渲染HTML中没有实际的onclick属性。

Fiddle：https://jsfiddle.net/roj4p1gt/

我不确定是否有一种好的方法可以自动做到这一点，而不使用某种机制来拦截React元素的创建并修改它们（或者可能是源级别的转换）。例如，使用Babel，您可以使用Babel-plugin-react-transform，并使用onClick道具将className添加到所有元素中，方法如下（警告：伪代码）：

export default function addClassNamesToOnClickElements() {
  return function wrap(ReactClass) {
    const originalRender = ReactClass.prototype.render;
    ReactClass.prototype.render = function render() {
      var element = originalRender.apply(this, arguments);
      return addClickClassNamesToApplicableElements(element);
    }
    return ReactClass;
  }
}
function addClassNamesToApplicableElements(elem) {
  if (!elem || typeof elem === "string") return elem;
  const children = elem.children;
  const modifiedChildren = elem.props.children.map(addClassNamesToApplicableElements);
  if (elem.props.onClick) {
    const className = elem.props.className || "";
    return {
      ...elem,
      props: {
        ...elem.props,
        className: (className + " hasOnClick").trim(),
        children: modifiedChildren
      }
    };
  } else {
    return {
      ...elem,
      props: {
        ...elem.props,
        children: modifiedChildren
      }
    }
  };
}

以下是第二部分工作的快速示例：https://bit.ly/1kSFcsg

您可以使用css轻松做到这一点：

a:hover {
 cursor:pointer;
}
相关文章：