class vs className dans React 16

Question

J'ai vu que React 16 permet de faire passer des attributs dans le DOM. Donc, cela signifie que 'class' peut être utilisé à la place de className, non ?

Je me demande simplement s'il y a des avantages à continuer à utiliser className plutôt que class, en plus d'être rétrocompatible avec les versions précédentes de React.

Answer 1

class est un mot clé en javascript et JSX est une extension de javascript. C'est la raison principale pour laquelle React utilise className au lieu de class .

Rien n'a changé à cet égard.

Pour développer ce point un peu plus. A mot-clé signifie qu'un token a une signification particulière dans la syntaxe d'un langage. Par exemple dans :

class MyClass extends React.Class {

Token class indique que le jeton suivant est un identifiant et que ce qui suit est une déclaration de classe. Voir Mots clés Javascript + mots réservés .

Le fait qu'un token soit un mot-clé signifie que nous ne pouvons pas l'utiliser dans certaines expressions, par ex.

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

L'un des problèmes est que personne ne peut savoir si un autre problème ne se posera pas à l'avenir. Chaque langage de programmation est en constante évolution et class peut en fait être utilisé dans une nouvelle syntaxe conflictuelle.

De tels problèmes n'existent pas avec className .

Answer 2

Mise à jour (août 2020) :

A commentaire par Dan Abramov sur le même fil :

C'est la partie la plus controversée de la proposition. Depuis lors, nous avons publié Hooks, qui encourage l'écriture de composants de fonction. Dans nous suggérons généralement l'utilisation de la déstructuration pour les props, mais vous ne pouvez pas écrire { class, ... } parce que ce serait une syntaxe erreur. Donc, dans l'ensemble, il n'est pas clair que cela soit assez ergonomique pour pour le faire. Je pense qu'il est plausible que nous revisitions dans le futur, ou au moins faire class ne pas avertir et laisser les gens faire ce qu'ils veulent. Mais pour l'instant, nous allons mettre cette idée au placard.

donc, non.

---

(août 2018)

L'équipe React va en fait passer à class au lieu de className dans un avenir proche ( fuente ):

• className class ( #4331 voir aussi #13525 (commentaire) ci-dessous). Cela a a été proposé d'innombrables fois. Nous permettons déjà de passer la classe jusqu'au noeud DOM dans React 16. La confusion que cela crée n'est ne vaut pas les limitations de syntaxe contre lesquelles il essaie de se protéger.

Pourquoi changer et ne pas soutenir les deux ?

Si nous soutenons les deux sans avertissement, alors la communauté se divisera. sur lequel utiliser. Chaque composant sur npm qui accepte une classe prop devra se souvenir de transmettre les deux. Si un seul composant au au milieu ne joue pas le jeu et n'implémente qu'une seule prop, la classe est perdue - ou vous risquez de vous retrouver avec class y className au fond "en désaccord l'un avec l'autre, sans que React puisse résoudre ce conflit. conflit. Nous pensons donc que ce serait pire que le statu quo, et nous voulons éviter cela.

Vous devriez donc rester à l'écoute.
Je recommande toujours d'utiliser className tant que c'est ce que l'API attend.

Answer 3

Juste pour apporter un peu plus de lumière, en plus des autres bonnes réponses déjà données :

Vous remarquerez que React utilise className à la place de l'élément classe DOM traditionnelle. D'après la documentation, "Puisque JSX est JavaScript, les identifiants tels que class et for sont déconseillés comme noms d'attributs XML XML. Au lieu de cela, les composants React DOM attendent des noms de propriétés DOM comme className et htmlFor, respectivement."

http://buildwithreact.com/tutorial/jsx

Aussi, pour citation de zpao (un contributeur de React / employé de facebook)

Nos composants DOM utilisent (principalement) l'API JS, nous avons donc choisi d'utiliser les propriétés JS (node.className, et non node.class).

Answer 4

La documentation de React recommande d'utiliser cannonical React attribute plutôt que la dénomination Javascript conventionnelle, de sorte que même si React permet de transmettre des attributs au DOM, il vous donnera un avertissement.

De la docs :

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.

Answer 5

Classe et nom de classe dans reactJS Class est un mot ou mot-clé réservé dans reactJS tout comme function l'est dans le javascript. C'est pourquoi nous utilisons le mot "className" pour faire référence à la classe.