Klasse gegen Klassenname in Reaktion 16

84

Ich habe gesehen, dass mit React 16 Attribute an das DOM weitergeleitet werden können. Das bedeutet also, dass 'class' anstelle von className verwendet werden kann, oder?

Ich frage mich nur, ob die Verwendung von className gegenüber class Vorteile bietet, abgesehen davon, dass sie mit früheren Versionen von React abwärtskompatibel ist.

free2ask
quelle
className ist das einzige unterstützte Attribut, aber in Version 16 wurde eine Änderung für "Bekannte Attribute mit einem anderen kanonischen Reaktionsnamen" vorgenommen. In v15 warnt React und ignoriert sie, in v16 warnt es, konvertiert aber Werte in Zeichenfolgen und leitet sie weiter. Die Dokumentation gibt eine klare Antwort auf Ihre Frage: "Verwenden Sie für alle unterstützten Attribute immer die kanonische React-Benennung." Siehe reactjs.org/blog/2017/09/08/…
lifeisfoo

Antworten:

107

classist ein Schlüsselwort in Javascript und JSX ist eine Erweiterung von Javascript. Das ist der Hauptgrund, warum React classNameanstelle von verwendet class.

Daran hat sich nichts geändert.

Um dies ein bisschen mehr zu erweitern. Ein Schlüsselwort bedeutet, dass ein Token in einer Sprachsyntax eine besondere Bedeutung hat. Zum Beispiel in:

class MyClass extends React.Class {

Token classbedeutet, dass das nächste Token ein Bezeichner ist und das Folgende eine Klassendeklaration ist. Siehe Javascript-Schlüsselwörter + reservierte Wörter .

Die Tatsache, dass ein Token ein Schlüsselwort ist, bedeutet, dass wir es in einigen Ausdrücken nicht verwenden können, z

// invalid in older versions on Javascript, valid in modern javascript
const props = {
  class: 'css class'
}

// valid in all versions of Javascript
const props = {
 'class': 'css class'
};

// invalid!
var class = 'css';

// valid
var clazz = 'css';

// invalid!
props.class = 'css';

// valid
props['class'] = 'css';

Eines der Probleme ist, dass niemand wissen kann, ob in Zukunft kein anderes Problem auftreten wird. Jede Programmiersprache entwickelt sich weiter und classkann tatsächlich in einer neuen widersprüchlichen Syntax verwendet werden.

Es gibt keine derartigen Probleme mit className.

Sulthan
quelle
Hallo Sulthan. Könnten Sie bitte Ihre Antwort etwas näher erläutern? Warum ist class ein Schlüsselwort in Javascript und macht className zur bevorzugten Praxis?
David A. French
1
@ DavidA.French Erweiterte Antwort. Bitte beachten Sie auch die anderen Antworten.
Sulthan
1
Vielen Dank Sulthan! das war sehr hilfreich.
David A. French
2
props.class = 'css' Dies ist völlig gültig
daGo
31

Das Reagieren Team geht tatsächlich zu wechseln , class anstatt className in der kommenden Zukunft ( Quelle ):

  • classNameclass( # 4331 , siehe auch # 13525 (Kommentar) unten). Dies wurde unzählige Male vorgeschlagen. Wir erlauben bereits in React 16 die Weitergabe von Klassen an den DOM-Knoten. Die Verwirrung, die dadurch entsteht, ist die Syntaxbeschränkungen nicht wert, vor denen es zu schützen versucht.

Warum wechseln und nicht beide unterstützen?

Wenn wir beide ohne Warnungen unterstützen, teilt sich die Community auf, welche verwendet werden soll. Jede Komponente auf npm, die eine Klassenstütze akzeptiert, muss daran denken, beide weiterzuleiten. Wenn auch nur eine Komponente in der Mitte nicht entlang und Geräten nur eine Stütze spielt, wird die Klasse verloren - oder riskieren Sie mit enden classund classNameam unteren Rande „nicht einverstanden“ miteinander, ohne die Möglichkeit , für diesen Konflikt lösen React. Wir denken also, das wäre schlimmer als der Status Quo und wollen dies vermeiden.

Also solltest du dran bleiben.
Ich würde immer noch verwenden className, solange dies von der API erwartet wird.

Maor Refaeli
quelle
4
Dies scheint nicht mehr der Fall zu sein. Siehe (Ende): github.com/facebook/react/pull/10169
machineghost
2
@machineghost # 13525 (Übergang durchführen) wurde am 31. August 2018 eröffnet. Andererseits wurde # 10169 am 4. August 2017 geschlossen. Ich denke, es ist immer noch relevant.
Maor Refaeli
3
Es ist nicht relevant. Sie haben erkannt, dass classsie nicht in vielen Ausdrücken verwendet werden können, da es sich um ein Schlüsselwort handelt.
Sulthan
16

Nur um ein bisschen mehr Licht ins Dunkel zu bringen, zusätzlich zu den anderen guten Antworten, die bereits gegeben wurden:

Sie werden feststellen, dass React anstelle der herkömmlichen DOM-Klasse className verwendet. In den Dokumenten heißt es: "Da JSX JavaScript ist, werden Bezeichner wie class und for als XML-Attributnamen nicht empfohlen. Stattdessen erwarten React DOM-Komponenten DOM-Eigenschaftsnamen wie className bzw. htmlFor."

http://buildwithreact.com/tutorial/jsx

Um auch zpao zu zitieren (ein React-Mitarbeiter / Facebook-Mitarbeiter)

Unsere DOM-Komponenten verwenden (meistens) die JS-API, daher haben wir uns für die Verwendung der JS-Eigenschaften entschieden (node.className, nicht node.class).

ToddBFisher
quelle
8

In React-Dokumenten wird empfohlen, cannonical React attributeanstelle der herkömmlichen Javascript-Benennung Namen zu verwenden. Selbst wenn React die Weitergabe von Attributen an DOM zulässt, erhalten Sie eine Warnung.

Aus den Dokumenten:

Known attributes with a different canonical React name:

    <div tabindex="-1" />
    <div class="hi" />

React 15: Warns and ignores them.
React 16: Warns but converts values to strings and passes them through.
Note: always use the canonical React naming for all supported attributes.
Shubham Khatri
quelle
1
Warum macht es diese Empfehlung?
David A. French
3

Klasse versus Klassenname in reactJS Klasse ist ein reserviertes Wort oder Schlüsselwort in reactJS, ebenso wie die Funktion im Javascript. Deshalb verwenden wir das Wort "className", um auf die Klasse zu verweisen.

Kadiro Elemo
quelle
2

Es gibt keine wirkliche Erklärung des React-Teams dazu, aber man würde annehmen, dass es seit seiner Einführung in ES2015 + von dem reservierten Schlüsselwort "class" in Javascript unterschieden wird.

Selbst wenn Sie beim Erstellen des Elements "Klasse" in der Elementkonfiguration verwenden, wird kein Kompilierungs- / Renderfehler ausgegeben.

Rut Shah
quelle
2

In ReactJS haben wir es mit JSX und nicht mit HTML zu tun, wie Sie alle wissen. Die JSX möchte, dass Sie className verwenden, da es sich um eine zugrunde liegende Javascript-DOM-API handelt! class als reserviertes Schlüsselwort in JS ist nicht der Hauptgrund, warum wir nicht class und stattdessen className verwenden. Dies liegt daran, dass wir uns auf diese DOM-API beziehen

cmkishores
quelle