将React类组件转换为功能组件

Question

我是Reactjs的新手，我试图将React类组件转换为react钩子，但没有成功。当我使用类组件工作时，但是当我尝试通过hooks方法使用它时，发生了一些转换，我不知道如何处理

这是原始课程

import React from "react";
import "./App.scss";
import { Login, Register } from "./components/login/index";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogginActive: true
    };
  }

  componentDidMount() {
    //Add .right by default
    this.rightSide.classList.add("right");
  }

  changeState() {
    const { isLogginActive } = this.state;

    if (isLogginActive) {
      this.rightSide.classList.remove("right");
      this.rightSide.classList.add("left");
    } else {
      this.rightSide.classList.remove("left");
      this.rightSide.classList.add("right");
    }
    this.setState(prevState => ({ isLogginActive: !prevState.isLogginActive }));
  }

  render() {
    const { isLogginActive } = this.state;
    const current = isLogginActive ? "Register" : "Login";
    const currentActive = isLogginActive ? "login" : "register";
    return (
      <div className="App">
        <div className="login">
          <div className="container" ref={ref => (this.container = ref)}>
            {isLogginActive && (
              <Login containerRef={ref => (this.current = ref)} />
            )}
            {!isLogginActive && (
              <Register containerRef={ref => (this.current = ref)} />
            )}
          </div>
          <RightSide
            current={current}
            currentActive={currentActive}
            containerRef={ref => (this.rightSide = ref)}
            onClick={this.changeState.bind(this)}
          />
        </div>
      </div>
    );
  }
}

const RightSide = props => {
  return (
    <div
      className="right-side"
      ref={props.containerRef}
      onClick={props.onClick}
    >
      <div className="inner-container">
        <div className="text">{props.current}</div>
      </div>
    </div>
  );
};

export default App;

这是我的变形班

import React,{useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';
import {Login, Register} from './components/login/'

const  App = () => {

  const [isLogginActive, setLogginActive] = useState(true)

  useEffect(()=>{
    rightSide.classList.add("right")
  },[])
  /* console.log("Premierement")
  console.log({isLogginActive})
  setLogginActive(!{isLogginActive})
  console.log("Deuxiemement")
  console.log({isLogginActive}) */

  const changeState = (props)=>{
    if({isLogginActive}){
      rightSide.classList.remove("right");
      rightSide.classList.add("left");
    }else{
      rightSide.classList.remove("left");
      ightSide.classList.add("right");
    }
    setLogginActive(prevState =>({isLogginActive: !prevState.isLogginActive}))
  }

  const current = {isLogginActive} ? "Register":"Login";
  const currentActive = {isLogginActive} ? "login":"register"

  return (
    <div className="App">
        <div className="login">
          <div className="container" ref={ref => (container = ref)}>
            {isLogginActive && (
              <Login containerRef={ref => (current = ref)} />
            )}
            {!isLogginActive && (
              <Register containerRef={ref => (current = ref)} />
            )}
          </div>
          <RightSide
            current={current}
            currentActive={currentActive}
            containerRef={ref => (rightSide = ref)}
            onClick={changeState}
          />
        </div>
      </div>
  );
}

const RightSide = props => {
  return(
    <div
      className="right-side"
      ref={props.containerRef}
      onClick={props.onClick}
    >
      <div className="inner-container">
        <div className="text">{props.current}</div>
      </div>
    </div>
  )
}

export default App;

我没有放置登录和注册组件..我被卡住了。

Answer 1

是否可以尝试不破坏状态并修改setLogginActive。功能组件中是这样的

  const changeState = (props)=>{
    if(isLogginActive){
      rightSide.classList.remove("right");
      rightSide.classList.add("left");
    }else{
      rightSide.classList.remove("left");
      rightSide.classList.add("right");
    }
    setLogginActive((prevState) =>!prevState)
  }

  const current = isLogginActive ? "Register":"Login";
  const currentActive = isLogginActive ? "login":"register"

Answer 2

您不必这样做

SELECT m.name
FROM Member m
WHERE NOT EXISTS (
    SELECT *
    FROM State s
    WHERE
        m.id = s.member_id
        AND s.property = 5
);

你必须这样放

const current = {isLogginActive} ? "Register":"Login";
const currentActive = {isLogginActive} ? "login":"register"

因为它不在const changeState = (props)=>{ if(isLogginActive && rightSide){ rightSide.classList.remove("right"); rightSide.classList.add("left"); }else{ if(rightSide){ rightSide.classList.remove("left"); rightSide.classList.add("right"); } } setLogginActive((prevState) =>!prevState) } const current = isLogginActive ? "Register":"Login"; const currentActive = isLogginActive ? "login":"register" 中，而是在功能组件之间。