Comment ajouter des attributs HTML personnalisés dans JSX

vous pouvez ajouter un attribut en utilisant ES6 spread operator, par exemple

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

et dans la méthode render:

<MyComponent {...myAttr} />

Considérez que vous souhaitez passer un attribut personnalisé nommé myAttr avec la valeur myValue , cela va fonctionner:

<MyComponent data-myAttr={myValue} />

vous pouvez utiliser l'attribut est " pour désactiver L'attribut React whitelist pour un élément.

Voir mon anwser ici: Stackoverflow

j'ai rencontré ce problème beaucoup en essayant D'utiliser SVG avec react.

j'ai fini par utiliser une solution assez sale, mais il est utile de savoir que cette option existait. Ci-dessous, j'autorise l'utilisation de l'attribut vector-effect 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';

aussi longtemps que cela est inclus/importé avant que vous ne commenciez à utiliser react, cela devrait fonctionner.

selon la version de React que vous utilisez, vous pourriez avoir besoin d'utiliser quelque chose comme ça. Je sais que Facebook pense à dévaloriser les "string Ref" dans un avenir 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 référence de Facebook

selon ce qui vous empêche de faire cela, il y a une autre option qui ne nécessite aucun changement à votre implémentation actuelle. Vous devriez être en mesure de augmenter React dans votre projet avec un fichier .ts ou .d.ts (pas sûr lequel) à la racine du projet. Il ressemblerait à quelque chose comme ceci:

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 Contrôle

vous pourriez même avoir à envelopper dans un declare global { . Je n'ai pas atterri sur une solution définitive encore.

voir aussi: comment ajouter des attributs aux éléments HTML existants dans TypeScript/JSX?

voir valeur d'attribut dans la console sur l'événement de clic

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

simple ajouter customAttribute comme 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>
        }
//...