javascript - 如何在不删除初始类名的情况下根据状态将类名添加到组件

Question

我有一个可切换的组件：

class HamburgerMenu extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            toggle: false,
        }
    }

    Toggle() {
        this.setState((currentState) => ({
            toggle: !currentState.toggle
        }));
    }

    render() {
        return (
            <StyledHamburgerMenu className="HamburgerMenu" onClick={ () => this.Toggle() }>
                <FontAwesomeIcon icon="bars" />
            </StyledHamburgerMenu>
        )
    }
}

我想在一个单独的文件中为div( ) jsx 元素添加一个类名：extended-right-bar

function App() {
  return (
    <div className="App">
      <div className="grid-display">
        <div className="right-bar">
          <HamburgerMenu /> 
          <PlusButton /> 
        </div>
        <div className="extended-right-bar">
          <h1 className="main-title">Notes</h1>
          <div className="folders-section">
            <h2>Folders</h2>
            <Folder name="folder" />
            <Folder name="folder" />
            <Folder name="folder" />
            <Folder name="folder" />
          </div>
          <div className="tags-section">
            <h2>Tags</h2>
            <Label name="buisness" />
            <Label name="buisness" />
            <Label name="buisness" />
          </div>
        </div>
        <div className="main">
          <NoteWindow />
        </div>
      </div>
    </div>
  );
}

我怎样才能做到这一点？它们相互导入和导出

标签： javascriptreactjs

Answer 1

您可以使用

element.classList.add("className");

添加一个类而不覆盖现有的类。

相应地替换元素和类名