Wie man benutzerdefinierte HTML-Attribute in JSX hinzufügt

Gibt es verschiedene Gründe dahinter, aber ich Frage mich, wie einfach fügen Sie benutzerdefinierte Attribute zu einem element in JSX?

InformationsquelleAutor der Frage Andrey Borisko | 2015-07-07

react-jsx

40

EDIT: Aktualisiert, um Reagieren 16

Benutzerdefinierte Attribute werden unterstützt nativ Reagieren 16, die derzeit in der RC und sollte bald veröffentlicht werden. Dies bedeutet, dass das hinzufügen eines benutzerdefinierten Attributs zu einem element wird so einfach wie das hinzufügen es zu einer render - Funktion, etwa so:
```
render() {
  return (
    <div custom-attribute="some-value" />
  );
}
```
Finden Sie in diesem blog-post für mehr:

https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html

Können Sie testen, Reagieren 16 RC in Ihrem Projekt, indem Sie die folgenden Anweisungen befolgen:

https://github.com/facebook/react/issues/10294

Vorherigen Antworten (Reagieren 15 und älter)

Benutzerdefinierte Attribute werden derzeit nicht unterstützt. Siehe diese offene Frage für weitere Infos: https://github.com/facebook/react/issues/140

Als workaround kann man etwas tun, wie dies in componentDidMount:
```
componentDidMount: function() {
  var element = ReactDOM.findDOMNode(this.refs.test);
  element.setAttribute('custom-attribute', 'some value');
}
```
Sehen https://jsfiddle.net/peterjmag/kysymow0/ für ein funktionsfähiges Beispiel. (Inspiriert durch syranide Vorschlag in dieser Kommentar.)

InformationsquelleAutor der Antwort peterjmag
27

Können Sie fügen Sie ein Attribut mit ES6-spread-operator, z.B.
```
let myAttr = {'data-attr': 'value'}
```
und in der render-Methode:
```
<MyComponent {...myAttr} />
```
InformationsquelleAutor der Antwort Spadar Shut
9

Können Sie die "ist" - Attribut zu deaktivieren, die Reagieren Attribut-whitelist für ein element.

Siehe meine anwser hier:
Stackoverflow

InformationsquelleAutor der Antwort Christian Steinmann
8

Betrachten, die Sie übergeben möchten ein benutzerdefiniertes Attribut mit dem Namen myAttr mit Wert myValue, das funktioniert:
```
<MyComponent data-myAttr={myValue} />
```
InformationsquelleAutor der Antwort Luca Fagioli
4

Ich lief in dieses problem, eine Menge, wenn Sie versuchen zu verwenden SVG mit reagieren.

Ich am Ende mit ganz eine dreckige Lösung, aber es ist nützlich zu wissen, diese option existiert. Unten habe ich die vector-effect Attribut auf SVG-Elemente.
```
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';
```
Solange dieser ist im Lieferumfang enthalten/importiert werden, bevor Sie beginnen zu reagieren, sollte es funktionieren.

InformationsquelleAutor der Antwort rbhalla

Je nachdem, welche version von Reagieren, die Sie verwenden, müssen Sie möglicherweise verwenden Sie so etwas wie dieses. Ich weiß, Facebook ist denken abwertend über string-Referenzen in der etwas näheren Zukunft.

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

Facebook - ref-Dokumentation

InformationsquelleAutor der Antwort Dixon Minnick

0

Je nachdem, was genau Sie daran hindern, dies zu tun, gibt es eine weitere option, die erfordert keine änderungen an Ihrer aktuellen Umsetzung. Sie sollten in der Lage sein, um erweitern Reagieren in Ihr Projekt mit ein .ts oder .d.ts - Datei (nicht sicher welche) im Projekt-root. Es würde in etwa so Aussehen:
```
declare module 'react' {
    interface HTMLAttributes<T> extends React.DOMAttributes<T> {
        'custom-attribute'?: string; //or 'some-value' | 'another-value'
    }
}
```
Andere Möglichkeit ist die folgende:
```
declare namespace JSX {
    interface IntrinsicElements {
        [elemName: string]: any;
    }
}
```
Sehen JSX | Typ-Überprüfung

Könnten Sie sogar haben zu wickeln, dass in einem declare global {. Ich habe nicht landete auf eine endgültige Lösung noch nicht.

Siehe auch: Wie kann ich Attribute hinzufügen, um die vorhandenen HTML-Elemente im Typoskript/JSX?

InformationsquelleAutor der Antwort jedmao

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

EDIT: Aktualisiert, um Reagieren 16

Vorherigen Antworten (Reagieren 15 und älter)