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（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");

添加类而不覆盖现有类。

相应地替换元素和className

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

如何在不删除初始className的情况下基于状态将className添加到组件

2 个答案: