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

Posted 2023-02-23

【中文标题】如何在反应中将className添加到组件？

【英文标题】：How to add className to component in react?

【发布时间】：2021-11-08 12:32:52

【问题描述】：

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

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

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

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

【问题讨论】：

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

【参考方案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" />