Klasse gegen Klassenname in Reaktion 16

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.

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.

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

• className→ class( # 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.

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).

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.

Ab Juni 2019 wurde der Prozess der Änderung von className in class gestoppt und kann später fortgesetzt werden

Hier ist der Beitrag von Facebook Dev erklären, warum

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

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.

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.

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