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) => {
由于我无法以的格式分配classNameclass.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并使用联接函数。
<div className = {attachedClasses.join(' ')} >
<Logo height="11%" />
<nav>
<NavigationItems />
</nav>
</div>
</Aux>
)
}
export default sideDrawer;
也许您可以使用一个函数向类返回一个字符串，例如：<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];
}
className = "SideDrawer Open";
当您执行className = {attachedClasses.join(' ')}时，请确保您的attachedClasses是类似于attachedClasses = ["SideDrawer", "Open"];.的字符串数组
在您的代码中，attachedClasses是一个HTML元素，因此它不起作用。
假设您有一个类数组：
arrayOfClasses = ['SideDrawer','Open','anyRandomClass'];
现在className道具将一个字符串作为其值。为了将类数组转换为单个字符串，我们使用了join运算符。
className = {arrayOfClasses .join(' ')}
这将返回单个字符串，如"SideDrawer Open anyRandomClass"