JSX 中的 className 属性是什么意思？

Question

我正在尝试找出一些示例 JavaScript/React/Enzyme 代码，并且className对ReactTestObj下面JSX 部分中的属性含义感到完全困惑。

我知道className在 JSX 中使用是因为它class是 JavaScript 中的保留关键字，但我认为JSX/HTML 中的className/class属性是用于引用 CSS 类的保留关键字？如果在我的示例中没有 CSS，除了引用 CSS 类之外，class/的合法用途是className什么？

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用于代替classJSX，因为class是 JavaScript 关键字。所有的 JSX 都变成了普通的 JavaScript。如果您编写class它，它将尝试制作 JavaScriptclass而不是制作带有class.

因此，当您编写 react 时，它看起来像这样。

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

然后像 babel 这样的东西将把这些代码变成普通的 JavaScript：

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

在 vanilla 中，JavaScriptclassName用于分配类，因为 class 关键字创建了不同类型的类。

Answer 2

className 是定义和读取节点的 html 类的 javascript 处理程序

这些主要用于在站点中搜索同一组中的元素（例如属于列表等的所有元素），并通过 css 为该组元素定义样式属性