如何将多个css类作为数组分配给React中的jsx变量，然后使用join()函数将该变量分配给className答案

【问题标题】：How to assign multiple css classes as an array to a jsx variable in React, and then assign the variable to the className with join() function如何将多个css类作为数组分配给React中的jsx变量，然后使用join()函数将该变量分配给className
【发布时间】：2020-11-07 05:33:47
【问题描述】：

import React from 'react';
import classes from './SideDrawer.css';
import Logo from '../../Logo/Logo';
import NavigationItems from '../NavigationItems/NavigationItems';
import Backdrop from '../../UI/Backdrop/Backdrop';
import Aux from '../../../hoc/Auxiliary';

const sideDrawer = (props) => {

由于我无法以以下格式分配 className class.SideDrawer，我必须使用className='SideDrawer'中的格式

let attachedClasses= {
    <div className = 'SideDrawer' 'Closed'></div>
}


if(props.open){
return(
        attachedClasses=<div className= 'SideDrawer' 'Open'> </div> 
    )
}


return(
    <Aux>
        <Backdrop show={props.open} clicked={props.closed}/>

我也不能将变量attachedClasses 分配给className 并使用join函数。

        <div className = {attachedClasses.join(' ')} >
            <Logo height="11%" />
            <nav>
                <NavigationItems />
            </nav>
        </div>    
    </Aux>
    )

}


export default sideDrawer;

【问题讨论】：

标签： css reactjs jsx

【解决方案1】：

也许您可以使用函数将字符串返回给您的类，例如： <div className = {attachedClasses.join(' ')} > 应该是 <div className = {functionThatReturnsClassName()} >。该函数应该类似于以下内容：

functionThatReturnsClassName = () => {
  if (something) {
   return attachedClasses[0]
   0 for the 'SideDrawer', 1 for the 'Open'
  }
  if(you want all of them condition) {
   return `${attachedClasses[0]} + ${attachedClasses[1]}`
  }
  return attacheClasses[0];
}

【讨论】：

【解决方案2】：

className = "SideDrawer Open";

当你这样做className = {attachedClasses.join(' ')} 确保你的attachedClasses 是一个字符串数组，如attachedClasses = ["SideDrawer", "Open"];.

在您的代码中，attachedClasses 是一个 HTML 元素，因此它不起作用。

假设你有一个类数组：

arrayOfClasses = ['SideDrawer','Open','anyRandomClass'];

现在 className prop 接受一个字符串作为它的值。要将类数组转换为单个字符串，我们使用join 运算符。

className = {arrayOfClasses .join(' ')}

这将返回一个字符串，例如"SideDrawer Open anyRandomClass"

【讨论】：

你能详细说明一下吗？我仍然感到困惑，我需要将这些类保存在一个数组变量中，然后将该变量与连接函数一起分配给一个类名。
更新了答案。 @SunnyGaonkar