Wahre benutzerdefinierte Attribute (z. B. Mikrodaten) in React

Question

Die Website, die ich entwickle, nutzt Microdata (mit schema.org). Während wir die Entwicklung verschieben, um React zu verwenden, um unsere Ansichten zu rendern, habe ich einen Blocker gefunden, in dem React nur Attribute in der HTML-Spezifikation darstellt. Microdata spezifiziert jedoch benutzerdefinierte Attribute wie itemscope.

Da ich relativ neu in React bin und noch keine Chance hatte, den Kern vollständig zu verstehen, ist meine Frage, was wäre der beste Weg, um die Funktionalität von react.js zu erweitern, um definierte benutzerdefinierte Attribute zu ermöglichen, zB Mikrodaten?

Gibt es eine Möglichkeit, den Attributs-/Requisiten-Parser zu erweitern, oder ist es ein Job für einen Mix, der alle übergebenen Requisiten überprüft und das DOM-Element direkt verändert?

(Hoffentlich werden wir in der Lage sein, zusammen einen Rückgang der Erweiterung zu setzen für alle Unterstützung dafür zu sorgen, wenn eine Lösung klar ist.)

Answer 1

sollten Sie in der Lage sein, es zu tun mit 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) 
    } 
} 
... 

Die ganze Überprüfung für Microdata-Attribute können in ein Mixin für bequem verpackt werden. Das Problem mit diesem Ansatz ist, dass es nicht für integrierte React-Komponente (Komponenten erstellt von React.DOM) funktioniert. Update: Bei näherer Betrachtung React.DOM, komme ich mit dieser http://plnkr.co/edit/UjXSveVHdj8T3xnyhmKb?p=preview. Grundsätzlich wickeln wir die eingebauten Komponenten in einer benutzerdefinierten Komponente mit unserem Mixin. Da Ihre Komponenten auf den integrierten DOM-Komponenten von React basieren, würde dies funktionieren, ohne dass Sie das Mixin in die Komponenten aufnehmen müssen.

Die wirkliche Lösung würde sein, eine benutzerdefinierte Konfiguration anstelle von React DefaultDOMPropertyConfig zu injizieren, aber ich finde keine Möglichkeit, dies in einer Drop-in-Weise zu tun (DOMProperty ist durch das Modulsystem verborgen).

Answer 2

Es sieht aus wie diese Nicht-Standard-Eigenschaften

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 

Answer 3

Für diejenigen, die immer noch sucht nach Antworten auf Reagieren wurden hinzugefügt: https://facebook.github.io/react/docs/tags-and-attributes.html

Beispiel:

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

Answer 4

Sie können auch Verwenden Sie "ist" Attribut. Es deaktiviert die Attribut-Whitelist von React und lässt jedes Attribut zu. Aber Sie müssen class anstelle von className und for anstelle von htmlFor schreiben, wenn Sie is verwenden.

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

aktualisieren React 16 benutzerdefinierte Attribute jetzt möglich sind

In reagieren 16 benutzerdefinierte Attribute sind jetzt möglich

React 16 custom attributes