react jsx - from - Cómo agregar atributos html personalizados en JSX

react get data attribute from element

Question

Hay diferentes razones detrás de esto, pero me pregunto cómo simplemente agregar atributos personalizados a un elemento en JSX.

Answer 1

EDITAR: actualizado para reflejar React 16

Los atributos personalizados se admiten de forma nativa en React 16. Esto significa que agregar un atributo personalizado a un elemento ahora es tan simple como agregarlo a una función de render , de esta manera:

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

Para más:
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

Respuesta anterior (Reacción 15 y anterior)

Los atributos personalizados actualmente no son compatibles. Consulte este número abierto para obtener más información: https://github.com/facebook/react/issues/140

Como solución alternativa, puede hacer algo como esto en componentDidMount :

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

Consulte https://jsfiddle.net/peterjmag/kysymow0/ para ver un ejemplo de trabajo. (Inspirado por la sugerencia de syranide en este comentario ).

Answer 2

Considere que desea pasar un atributo personalizado llamado myAttr con valor myValue , esto funcionará:

<MyComponent data-myAttr={myValue} />

Answer 3

Dependiendo de la versión de React que esté usando, es posible que deba usar algo como esto. Sé que Facebook está pensando en despreciar las referencias de cadenas en un futuro cercano.

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''));

Documentación de referencia de Facebook

Answer 4

Dependiendo de qué es exactamente lo que le impide hacer esto, hay otra opción que no requiere cambios en su implementación actual. Debería poder aumentar React en su proyecto con un archivo .ts o .d.ts (no estoy seguro de cuál) en la raíz del proyecto. Se vería algo así:

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

Otra posibilidad es la siguiente:

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

Ver JSX | Comprobación de tipo

Incluso puede que tenga que envolverlo en una declare global { . Todavía no he llegado a una solución final.

Consulte también: ¿Cómo agrego atributos a elementos HTML existentes en TypeScript / JSX?

Answer 5

Me encontré con este problema mucho al intentar usar SVG con react.

Terminé usando una solución bastante sucia, pero es útil saber que esta opción existía. A continuación, permito el uso del atributo de vector-effect en elementos 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'';

Mientras esto se incluya / importe antes de comenzar a usar react, debería funcionar.

Answer 6

Puede agregar un atributo utilizando el operador de propagación ES6, p. Ej.

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

y en el método de renderizado:

<MyComponent {...myAttr} />

Answer 7

Puede hacerlo en el método del ciclo de vida de componentDidMount() la siguiente manera

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

Answer 8

Puede usar el atributo " is " para deshabilitar la lista blanca de atributos React de un elemento.

Vea mi respuesta aquí:

Answer 9

Ver el valor del atributo en la consola al hacer clic en el evento

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

simplemente agregue customAttribute como desee en el método de renderizado

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

Answer 10

si está utilizando es6, esto debería funcionar:

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