web-dev-qa-db-fra.com

Comment ajouter des attributs HTML personnalisés dans JSX

Il y a différentes raisons derrière cela, mais je me demande comment ajouter simplement des attributs personnalisés à un élément dans JSX?

javascripthtmlnode.jsreactjsreact-component
50
Andrey Borisko

EDIT: mis à jour pour refléter React 16

Les attributs personnalisés sont supportés de manière native dans React 16.). Cela signifie que l'ajout d'un attribut personnalisé à un élément est désormais aussi simple que de l'ajouter à une fonction render, comme suit:

render() {
  return (
    <div custom-attribute="some-value" />
  );
}

Pour plus:
https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes
https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html

Réponse précédente (Réagir 15 et plus tôt)

Les attributs personnalisés ne sont actuellement pas pris en charge. Voir ce numéro en cours pour plus d’informations: https://github.com/facebook/react/issues/14

En guise de solution de contournement, vous pouvez faire quelque chose comme ceci dans componentDidMount:

componentDidMount: function() {
  var element = ReactDOM.findDOMNode(this.refs.test);
  element.setAttribute('custom-attribute', 'some value');
}

Voir https://jsfiddle.net/peterjmag/kysymow0/ pour un exemple pratique. (Inspiré par la suggestion de syranide dans ce commentaire .)

56
peterjmag

Vous pouvez ajouter un attribut à l'aide de l'opérateur de propagation ES6, par exemple.

let myAttr = {'data-attr': 'value'}

et dans la méthode de rendu:

<MyComponent {...myAttr} />
39
Spadar Shut

Considérez que vous voulez passer un attribut personnalisé nommé myAttr avec la valeur myValue, cela fonctionnera:

<MyComponent data-myAttr={myValue} />
18
Luca Fagioli

Vous pouvez utiliser l'attribut " est " pour désactiver la liste blanche de l'attribut React d'un élément.

Voir ma réponse ici: Stackoverflow

10
Christian Steinmann

J'ai souvent rencontré ce problème lorsque j'essayais d'utiliser SVG avec react.

J'ai fini par utiliser un correctif assez sale, mais il est utile de savoir que cette option existait. Ci-dessous, j'autorise l'utilisation du vector-effect attribut sur les éléments SVG.

import SVGDOMPropertyConfig from 'react/lib/SVGDOMPropertyConfig.js';
import DOMProperty from 'react/lib/DOMProperty.js';

SVGDOMPropertyConfig.Properties.vectorEffect = DOMProperty.injection.MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.DOMAttributeNames.vectorEffect = 'vector-effect';

Tant que cela est inclus/importé avant de commencer à réagir, cela devrait fonctionner.

4
rbhalla

En fonction de la version de React que vous utilisez, vous devrez peut-être utiliser quelque chose comme ceci. Je sais que Facebook pense à déconseiller les références de chaînes dans un avenir assez proche.

var Hello = React.createClass({
    componentDidMount: function() {
        ReactDOM.findDOMNode(this.test).setAttribute('custom-attribute', 'some value');
    },
    render: function() {
        return <div>
            <span ref={(ref) => this.test = ref}>Element with a custom attribute</span>
        </div>;
    }
});

React.render(<Hello />, document.getElementById('container'));

documentation de Facebook

1
Dixon Minnick

Voir la valeur d'attribut dans la console lors de l'événement de clic

//...
   alertMessage (cEvent){
           console.log(cEvent.target.getAttribute('customEvent')); /*display attribute value */
        }
//...

simple add customAttribute selon votre souhait dans la méthode de rendu

render(){
    return <div>
//..
    <button customAttribute="My Custom Event Message" onClick={this.alertMessage.bind(this) } >Click Me</button>
            </div>
        }
//...
1
GMK Hussain

Selon ce qui vous empêche exactement de le faire, il existe une autre option qui ne nécessite aucune modification de votre implémentation actuelle. Vous devriez pouvoir augmenter React dans votre projet avec un .ts ou .d.ts fichier (pas sur lequel) à la racine du projet. Cela ressemblerait à quelque chose comme ça:

declare module 'react' {
    interface HTMLAttributes<T> extends React.DOMAttributes<T> {
        'custom-attribute'?: string; // or 'some-value' | 'another-value'
    }
}

Une autre possibilité est la suivante:

declare namespace JSX {
    interface IntrinsicElements {
        [elemName: string]: any;
    }
}

Voir JSX | Type Checking

Vous pourriez même avoir à envelopper cela dans un declare global {. Je n'ai pas encore atterri sur une solution finale.

Voir aussi: Comment ajouter des attributs à des éléments HTML existants dans TypeScript/JSX?

0
jedmao

si vous utilisez es6, cela devrait fonctionner:

<input {...{ "customattribute": "somevalue" }} />
0
Squibly

Vous pouvez le faire dans componentDidMount() méthode du cycle de vie de la manière suivante

componentDidMount(){
    const buttonElement = document.querySelector(".rsc-submit-button");
    const inputElement = document.querySelector(".rsc-input");
    buttonElement.setAttribute('aria-hidden', 'true');
    inputElement.setAttribute('aria-label', 'input');
  }
0
KARTHIKEYAN.A