javascript - qué - Verdaderos atributos personalizados(por ejemplo, microdatos) en React

jquery cambiar atributo data

Question

El sitio que estoy desarrollando hace uso de Microdata (usando schema.org). A medida que estamos cambiando el desarrollo para usar React para representar nuestras vistas, he golpeado un bloqueador donde React solo procesará los atributos en la especificación HTML, sin embargo, Microdata especifica atributos personalizados, como itemscope .

Como soy relativamente nuevo en React y aún no he tenido la oportunidad de entender completamente el núcleo, mi pregunta es ¿cuál sería la mejor manera de ampliar la funcionalidad de react.js para permitir atributos personalizados definidos, por ejemplo, Microdata?

¿Hay una forma de extender el analizador de atributos / props o es un trabajo para una mezcla que verifica todos los props aprobados y modifica el elemento DOM directamente?

(Esperamos que podamos juntar una extensión para que todos proporcionen soporte para esto cuando la solución sea clara).

Answer 1

Deberías poder hacerlo con componentDidMount :

...
componentDidMount: function() {
if (this.props.itemtype) {
this.getDOMNode().setAttribute(''itemscope'', true)
this.getDOMNode().setAttribute(''itemtype'', this.props.itemtype)
}
if (this.props.itemprop) {
this.getDOMNode().setAttribute(''itemprop'', this.props.itemprop)
}
}
...

Todo el cheque para los atributos de Microdata se puede envolver en una mezcla para conveniencia. El problema con este enfoque es que no funcionará para el componente React incorporado (componentes creados por React.DOM ) . Actualización: Mirando más de cerca a React.DOM , se me ocurre este http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview . Básicamente, envolvemos los componentes integrados en un componente personalizado con nuestro mixin. Dado que sus componentes se basan en los componentes DOM incorporados de React, esto funcionaría sin que tenga que incluir la mezcla en los componentes.

La solución real sería inyectar una configuración personalizada en lugar de DefaultDOMPropertyConfig de React, sin embargo, no puedo encontrar una manera de hacerlo de manera DOMProperty (el sistema de módulos oculta la DOMProperty ).

Answer 2

Hasta ahora, el mejor método que he encontrado se basa en un código de interoperabilidad de Amp vinculado a un comentario en el subproceso de seguimiento de errores de Reac sobre el tema. Lo modifiqué ligeramente para trabajar con una versión más nueva de React (15.5.4) y TypeScript.

Para el ES6 normal, simplemente puede eliminar la anotación de tipo para attributeName. El uso de require era necesario en TS ya que DOMProperty no se expone en index.d.ts de react, pero nuevamente la importación podría usarse en ES6 regular.

// tslint:disable-next-line:no-var-requires
const DOMProperty = require("react-dom/lib/DOMProperty");
if (typeof DOMProperty.properties.zz === "undefined") {
DOMProperty.injection.injectDOMPropertyConfig({
Properties: { zz: DOMProperty.MUST_USE_ATTRIBUTE },
isCustomAttribute: (attributeName: string) => attributeName.startsWith("zz-")
});
}

Ahora puedes usar cualquier atributo que comience con zz-

<div zz-context="foo" />

Normalmente, sería una mala idea usar partes internas para reaccionar de esta manera, pero creo que es mejor que cualquiera de los otros métodos. Funciona de la misma manera que los atributos abiertos existentes, como los datos, y el JSX es seguro incluso en el tipo TS. Creo que la próxima versión importante de Reac va a acabar con la lista blanca de todos modos, así que espero que no se necesiten cambios antes de que podamos eliminar por completo este shim.

Answer 3

Para aquellos que todavía están buscando respuestas: https://facebook.github.io/react/docs/tags-and-attributes.html

Ejemplo:

<div itemScope itemType="http://schema.org/Article"></div>

Answer 4

Parece que estas propiedades no estándar se han agregado a React

itemProp: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html
itemScope: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE, // Microdata: http://schema.org/docs/gs.html
itemType: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html

Tenga en cuenta que las propiedades tienen mayúscula en el medio:

<div itemProp="whatever..." itemScope itemType="http://schema.org/Offer">

generará los atributos en minúsculas apropiados como resultado.

Answer 5

También puedes usar el atributo " es ". Deshabilitará la lista blanca de atributos de React y permitirá cada atributo. Pero tiene que escribir class lugar de className y for lugar de htmlFor si lo usa is .

<div is my-custom-attribute="here" class="instead-of-className"></div>

Actualizar los atributos personalizados de React 16 ahora son posibles

En reaccionar ahora son posibles 16 atributos personalizados.

Reacciona 16 atributos personalizados.