Question

我需要将多个类应用于React组件而不需要安装任何额外的东西。这可能吗？

<Component id="test1" className="blue-text kps hide-on-small-and-down" />

我也试过

<Component id="test1" className={`blue-text kps hide-on-small-and-down`} />

但没有任何作用。

我一直在寻找几个小时，但没有找到任何不需要额外安装的东西。请不要在没有解释原因的情况下进行投票。谢谢

Answer 1

当您将className直接添加到组件时，它会作为可在组件内部this.props.className访问的道具传递给组件的该实例，并且您可以将该类应用于组件中的实际 DOM元素。

请记住，React组件不是实际的 DOM元素，而是更高阶的逻辑构造，它将被转换为一个或多个DOM元素（同时还添加行为等）。 CSS类仅适用于DOM元素。

Answer 2

我在代码中看到了className的错误用法。 className 代表标准html中的标准类属性。引用documentation。

“要指定CSS类，请使用className属性。这适用于所有常规DOM和SVG元素，例如，和其他。”

适用于常规DOM和SVG元素，您可以使用 className 属性。

<div className="one two three"> 
    This is the {this.props.name}
</div>

使用示例。

添加另一个点我不认为使用 className 将道具传递给子元素是一个好主意，因为 className 在这里有用。