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

【问题标题】：What does the className attribute mean in JSX?JSX 中的 className 属性是什么意思？
【发布时间】：2019-03-31 20:34:04
【问题描述】：

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

我知道在 JSX 中使用 className 是因为 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');
  });

【问题讨论】：

class 是 javascript 中的保留字。 className 只是一种解决方法。
stackoverflow.com/questions/46989454/…
你试过谷歌搜索“React 类名”吗？ This 来了。 HTML中没有className属性，它是class。
“我的示例代码中没有 CSS” - 那又如何？您可以将类用于样式以外的事物，例如使用它们来选择您发布的测试中的元素。如果您想了解一般 HTML 中的类，请参阅developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…，但我不清楚您在这里问什么。
没有“CSS 类”这样的东西。有一个名为 class 的 HTML 元素属性，以及一个可用于匹配类的 CSS 选择器。我建议阅读网络开发的基础知识，例如通过developer.mozilla.org/en-US/docs/Learn，在顶部添加 React 和 Enzyme 之前，或者很少会有意义。但是，即使它仅用于 CSS，它仍然必须在 HTML 中有效才能开始，不是吗？

标签： javascript reactjs enzyme

【解决方案1】：

在 JSX 中使用className 代替 class，因为 class 是 JavaScript 关键字。所有的 JSX 都变成了普通的 JavaScript。如果你写了class，它会尝试创建一个JavaScript class，而不是创建一个具有class 的元素。

所以，当你编写 react 时，它看起来像这样。

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

然后像 babel 之类的东西会获取该代码并将其转换为 vanilla JavaScript：

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

在原生 JavaScript 中，className 用于分配类，因为 class 关键字生成了不同类型的类。

【讨论】：

我想我的问题更多的是关于 HTML 中的 class (className) 属性是什么意思？是引用css还是更通用。好像我缺少一些关于 Web 开发的基本知识
是的！它适用于 CSS。
所以在传统的 HTML 中你使用 class 来添加一个类，而当你使用 JSX 时你使用 className 来添加一个类，但是它们都做同样的事情。
但是如果使用类来引用 CSS 样式，那么在您的示例中它引用的是什么样式？还是我的例子？
会有另一个包含样式的 CSS 文档。例如，我可能有一些 CSS 会影响 myName 类并使颜色变为蓝色。 .myName{color: blue}

【解决方案2】：

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

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

【讨论】：