使用onClick函數將樣式“cursor：pointer”應用於所有React組件

Question

我想應用樣式cursor:pointer具有onClick函數的所有React元素的cursor:pointer 。 我知道我可以對每個元素這樣做：

<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屬性。

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

Answer 1

我不確定是否有一種很好的方法可以自動執行此操作而不使用某種攔截React元素的創建並修改它們（或者可能是源級轉換）的機制。 例如，使用Babel，您可以使用babel-plugin-react-transform並使用onClick prop在所有元素中添加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

Answer 2

你可以用css輕松完成：

a:hover {
 cursor:pointer;
}