如何在反应中将className添加到组件？答案

【问题标题】：How to add className to component in react?如何在反应中将className添加到组件？
【发布时间】：2021-11-08 12:32:52
【问题描述】：

我有一个为 react 创建的导航栏组件。当我在不同的页面上调用这个组件时，我需要更改类名。

例如：我希望我的“”组件在一个页面上有一个不同的类，在另一个页面上有一个不同的类。

const ServicesCiso = () => {
return (
    <div className="hero">
        <NavBar/>
        <div className...

如何在这段代码中添加类名？

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript reactjs frontend components

【解决方案1】：

您应该通过 props 将 className 从外部传递给您的组件，但是您还需要在 init case 中使用默认类

我有这个库的建议 https://www.npmjs.com/package/classnames（合并类）

例子

View
   - ServicesCiso.js
   - ServicesCiso.css

import ./ServicesCiso.css;
import cn from('classnames');

const ServicesCiso = (props) => {
   const {className} = props;

   return (
     <div className={cn('hello', className}}>
     </div>
   )
}

【讨论】：

我不是这个意思。我想将 className 添加到我调用它的组件中。
因此您可以从外部传递 className 并根据您的情况在组件中使用它

【解决方案2】：

您可以将 className 作为 props 传递给该组件，并在您呈现它的页面上传递首选的 className

const ServicesCiso = ({ className }) => {
return (
    <div className={className}>
        <NavBar/>
        <div className...

<ServicesCiso className="my-class-name" />

【讨论】：