reactjs - 在 React JS 中添加和删除一个类列表

Question

我在 react js 中使用功能组件，在下面的代码中类 right-panel-active 没有被添加/未定义。有人帮助启用在切换按钮时添加类

import React from 'react';
import './style.css';
import {
  Modal,
  DropdownMenu
} from '../MaterialUI';

/**
* @author
* @function Header
**/

const Header = (props) => {

  const container = () => {
    document.getElementById('container');
  }    
  const signUpButton = () => {
     container.classList.add('right-panel-active');
  };  
  const signInButton = () => {
     container.classList.remove('right-panel-active');
  };

  return (
    <div className="header">
        <div className="container" id="container">
           <button className="ghost" id="signIn" onClick={signInButton} >Sign In</button>
        </div>
           <div className="overlay-panel overlay-right">
           <p>Enter your personal details and start journey with us</p>
                <button className="ghost" id="signUp" onClick={signUpButton} >Sign Up</button>
              </div>
            </div>
  )

}

export default Header

Answer 1

您没有使用 React 的任何功能。

Read about state management in React和 Event Handlers in React

const Header = (props) => {
 const [isContainerActive, setIsContainerActive] = React.useState(false);
  const signUpButton = () => {
     setIsContainerActive(false);
  };  
  const signInButton = () => {
     setIsContainerActive(true);
  };

  return (
    <div className="header">
      <div id="container" className={`container${isContainerActive ? " right-panel-active" : ""}`}>
         <button className="ghost" id="signIn" onClick={signInButton}>Sign In</button>
      </div>
      <div className="overlay-panel overlay-right">
       <p>Enter your personal details and start journey with us</p>
       <button className="ghost" id="signUp" onClick={signUpButton}>Sign Up</button>
      </div>
    </div>
  );
}

ReactDOM.render(<Header />, document.getElementById("root"));

.header {height: 120px;}
.container {float:left;}
.overlay-right {display: none;background: red;float:right;height:100%;}
.right-panel-active ~ .overlay-right {display: inline-block;}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

PS:我也推荐https://www.npmjs.com/package/classnames ，或用于类名管理的 cx 库。