使用onClick函数将样式"cursor:pointer"应用于所有React组件

Question

我想将样式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>

但这不起作用,因为onclick在使用React的onClick属性时,元素的呈现HTML中没有实际属性.

小提琴:https://jsfiddle.net/roj4p1gt/

Answer 1

我不确定是否有一种好方法可以自动执行此操作，而无需使用某种机制来拦截 React 元素的创建并修改它们（或者可能是源级转换）。例如，使用 Babel，您可以使用babel-plugin-react-transform并使用以下内容将 a 添加className到带有 prop 的所有元素（警告：伪代码）：onClick

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