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.
Antworten:
class
ist ein Schlüsselwort in Javascript und JSX ist eine Erweiterung von Javascript. Das ist der Hauptgrund, warum ReactclassName
anstelle von verwendetclass
.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
class
bedeutet, 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
class
kann tatsächlich in einer neuen widersprüchlichen Syntax verwendet werden.Es gibt keine derartigen Probleme mit
className
.quelle
props.class = 'css'
Dies ist völlig gültigDas Reagieren Team geht tatsächlich zu wechseln ,
class
anstattclassName
in der kommenden Zukunft ( Quelle ):Warum wechseln und nicht beide unterstützen?
Also solltest du dran bleiben.
Ich würde immer noch verwenden
className
, solange dies von der API erwartet wird.quelle
class
sie nicht in vielen Ausdrücken verwendet werden können, da es sich um ein Schlüsselwort handelt.Nur um ein bisschen mehr Licht ins Dunkel zu bringen, zusätzlich zu den anderen guten Antworten, die bereits gegeben wurden:
http://buildwithreact.com/tutorial/jsx
Um auch zpao zu zitieren (ein React-Mitarbeiter / Facebook-Mitarbeiter)
quelle
In React-Dokumenten wird empfohlen,
cannonical React attribute
anstelle 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.
quelle
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
quelle
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.
quelle
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.
quelle
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
quelle