如何在不删除初始类名的情况下将类名添加到基于 state 的组件

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>
        )
    }
}

我想将 class 名称添加到单独文件中的div （ extended-right-bar ）jsx 元素：

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>
  );
}

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

Answer 1

您可以使用

element.classList.add("className");

添加 class 而不覆盖现有的。

相应地替换元素和类名

Answer 2

您可以使用redux在切换时将classValue传递给不同的组件。

const Component = (props) => {
    const className = props.classValue ? "extended-right-bar " + props.classValue : "extended-right-bar";

    return (
      <div className={customProps.className}>
        <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>;
    );
}