Что означает атрибут className в JSX?

Question

Я пытаюсь выяснить пример кода JavaScript / React / Enzyme и полностью запутался в том, что означает атрибут className в JSX-части ReactTestObj ниже.

Я знаю, что className в JSX используется, потому что class является зарезервированным ключевым словом в JavaScript, но я думал, что атрибут className / class в JSX / HTML был зарезервированным ключевым словом для ссылки на класс CSS? Если в моем примере нет CSS, каково юридическое использование class / className, кроме ссылок на классы CSS?

import React from 'react';

export class ReactTestObj extends React.Component<Props, State> {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={'outer'}>
        <div className={'inner'}>
          <span className={'prop'}>prop</span>
          <span className={'state'}>state</span>
          <button
            className="activate"
            onClick={function() {

            }}>
            {this.props.value}
          </button>
        </div>
      </div>
    );
  }
}

и пример тестового кода для контекста:

import { mount, React, expect } from '../specHelper';
import { ReactTestObj } from '../../src/components/ReactTest';

describe('ReactTest', () => {
  it('should have an outer div', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.outer')).to.exist;
  });
  it('should have an inner div', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.inner')).to.exist;
  });
  it('should have a prop', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.prop')).to.exist;
  });

  it('should have a state and it should be set to 10', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.state')).to.exist;
    expect(wrapper.find('.state')).value('state');
  });

Answer 1

className используется вместо class в JSX, потому что class является ключевым словом JavaScript.Весь JSX превращается в ванильный JavaScript.Если бы вы написали class, он попытался бы создать JavaScript class, а не создать элемент, который имеет class.

Так что, когда вы пишете реакцию, это выглядит так.

const name = 'Maddie';
const element = <h1 className="myName">Hello, {name}</h1>;

Тогда что-то вроде babel возьмет этот код и превратит его в ванильный JavaScript:

var name = 'Maddie';
var element = React.createElement("h1", {
  className: "myName"
}, "Hello, ", name);

В ванильном JavaScript className используется для назначения классов, потому что ключевое слово class делаетРазличный тип класса.

Answer 2

className - это обработчик javascript для определения и чтения html-класса узла

они в основном используются для поиска на сайте элементов, входящих в одну группу (например, все элементы, которые являются частью списка и т. Д.), И для определения свойств стиля через css для этой группы элементов