class vs className w React 16

Widziałem, że React 16 umożliwia przekazywanie atrybutów do DOM. Oznacza to, że zamiast nazwy klasy można użyć „class”, prawda?

Zastanawiam się tylko, czy istnieją zalety dalszego używania className nad klasą, poza tym, że jest kompatybilny wstecz z poprzednimi wersjami React.

classjest słowem kluczowym w javascript, a JSX jest rozszerzeniem javascript. To jest główny powód, dla którego React używa classNamezamiast class.

W tym zakresie nic się nie zmieniło.

Aby to nieco rozszerzyć. Słowo kluczowe oznacza, że ​​token ma specjalne znaczenie w składni języka. Na przykład w:

class MyClass extends React.Class {

Token classoznacza, że ​​następny token jest identyfikatorem, a co następuje to deklaracja klasy. Zobacz Słowa kluczowe JavaScript + słowa zastrzeżone .

Fakt, że token jest słowem kluczowym oznacza, że ​​nie możemy go używać w niektórych wyrażeniach, np

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

Jednym z problemów jest to, że nikt nie może wiedzieć, czy w przyszłości nie pojawi się inny problem. Każdy język programowania wciąż się rozwija i classmoże być używany w nowej, sprzecznej składni.

Nie ma takich problemów className.

Zespół Reacta faktycznie przejdzie na class zamiast className w najbliższej przyszłości ( źródło ):

• className→ class( # 4331 , zobacz także # 13525 (komentarz) poniżej). Proponowano to niezliczoną ilość razy. Już zezwalamy na przekazywanie klasy do węzła DOM w Reakcie 16. Zamieszanie, które tworzy, nie jest warte ograniczeń składni, przed którymi próbuje się chronić.

Dlaczego warto zmienić i nie obsługiwać obu?

Jeśli będziemy wspierać oba bez ostrzeżeń, społeczność podzieli się, z którego z nich skorzystać. Każdy komponent na npm, który akceptuje właściwość klasy, będzie musiał pamiętać o przesłaniu obu. Jeśli choć jeden składnik w środku nie grać razem i narzędzia tylko jeden rekwizyt, klasa ginie - lub ryzyko ty kończąc classi classNamena dole „nie zgadzając się” ze sobą w żaden sposób do React rozwiązać ten konflikt. Więc uważamy, że byłoby to gorsze niż status quo i chcemy tego uniknąć.

Więc powinieneś być na bieżąco.
Nadal bym używał, classNameo ile tego oczekuje API.

Aby rzucić trochę więcej światła, oprócz innych dobrych odpowiedzi już udzielonych:

Zauważysz, że React używa className zamiast tradycyjnej klasy DOM. W dokumentacji „Ponieważ JSX to JavaScript, identyfikatory takie jak class i for nie są zalecane jako nazwy atrybutów XML. Zamiast tego komponenty React DOM oczekują nazw właściwości DOM, takich jak odpowiednio nazwa_klasy i htmlFor”.

http://buildwithreact.com/tutorial/jsx

Również cytując zpao (współpracownika React / pracownika Facebooka)

Nasze komponenty DOM używają (głównie) API JS, więc zdecydowaliśmy się na użycie właściwości JS (node.className, a nie node.class).

Dokumentacja React zaleca używanie cannonical React attributenazw zamiast konwencjonalnego nazewnictwa JavaScript, więc nawet jeśli React zezwala na przekazywanie atrybutów do DOM, wyświetli ostrzeżenie.

Z dokumentów:

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.

od czerwca 2019 proces zmiany className na class został zatrzymany, można go kontynuować później

tutaj jest post od dewelopera na Facebooku, wyjaśniający dlaczego

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

Klasa a nazwa_klasy wreakJS Klasa jest zastrzeżonym słowem lub słowem kluczowym w działaniuoreJS tak samo, jak funkcja jest w javascript. Dlatego w odniesieniu do klasy używamy słowa „nazwa klasy”.

Zespół Reacta nie ma na ten temat prawdziwego wyjaśnienia, ale można by przypuszczać, że odróżnia się je od zarezerwowanego słowa kluczowego „class” w Javascript od czasu jego wprowadzenia w ES2015 +.

Nawet jeśli użyjesz "class" w konfiguracji elementu podczas tworzenia elementu, nie zgłosi to żadnego błędu kompilacji / renderowania.

W ReactJS mamy do czynienia z JSX, a nie HTML, jak wszyscy wiecie. JSX chce, abyś używał className, ponieważ jest to podstawowy interfejs API języka JavaScript! class to zarezerwowane słowo kluczowe w JS nie jest głównym powodem, dla którego nie używamy class, a zamiast tego używamy className. To dlatego, że odnosimy się do tego DOM API