web-dev-qa-db-fra.com

Appliquez le style "curseur: pointeur" à tous les composants React avec la fonction onClick

J'aimerais appliquer le style cursor:pointer à tous les éléments React dotés d'une fonction onClick. Je sais que je pourrais le faire pour chaque élément:

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

ou ca:

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

Mais je préférerais de beaucoup pouvoir faire quelque chose comme ceci pour appliquer le style à tous les éléments:

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

Mais cela ne fonctionnera pas car il n'y a pas d'attribut onclick dans le code HTML rendu d'un élément lors de l'utilisation de l'attribut onClick de React. 

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

javascriptcssreactjs
10
chevin99

Je ne suis pas sûr qu'il y ait un bon moyen de faire cela automatiquement sans utiliser un mécanisme qui intercepte la création d'éléments React et les modifie (ou peut-être des transformations de niveau source). Par exemple, en utilisant Babel, vous pouvez utiliser babel-plugin-react-transform et ajouter une variable className à tous les éléments dotés d'un prop onClick utilisant quelque chose dans ce sens (avertissement: pseudocode):

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

Voici un exemple rapide de la deuxième partie: https://bit.ly/1kSFcsg

3
Michelle Tilley