Используя хук UseState и использовать хук эффекта - PullRequest
Новая
       92

Используя хук UseState и использовать хук эффекта

0 голосов
/ 01 мая 2020

Пожалуйста, как мне переписать этот кусок кода, комбинируя componentDidMount и componentDidupdate

У меня есть другие коды или, скорее, функция, которую мне нужно ввести в код, и как компонент на основе классов, это не так работает.

Но компонент, основанный на функциях, я смогу добавить больше функций в код.

Спасибо. 

var ps;

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor: "black",
      activeColor: "info"
    };
    this.mainPanel = React.createRef();
  }
 

  componentDidMount() {
    if (navigator.platform.indexOf("Win") > -1) {
      ps = new PerfectScrollbar(this.mainPanel.current);
      document.body.classList.toggle("perfect-scrollbar-on");
    }
  }
  componentWillUnmount() {
    if (navigator.platform.indexOf("Win") > -1) {
      ps.destroy();
      document.body.classList.toggle("perfect-scrollbar-on");
    }
  }
  componentDidUpdate(e) {
    if (e.history.action === "PUSH") {
      this.mainPanel.current.scrollTop = 0;
      document.scrollingElement.scrollTop = 0;
    }
  }
  handleActiveClick = color => {
    this.setState({ activeColor: color });
  };
  handleBgClick = color => {
    this.setState({ backgroundColor: color });
  };

То, что я сделал, не работало для обновления. 

var ps;
const Dashboard = (props) => {
  const[backgroundColor, setBackgroundColor] = useState("black");
  const[activeColor, setActiveColor] = useState("info");
  const [handleActiveClick, setHandleActiveClick] =useState({activeColor: 'color'});
  const [handleBgClick, setHandleBgClick] =useState({backgroundColor: 'color'});
  const mainPanel = useRef(null);


  useEffect(()=>{

    if (navigator.platform.indexOf("Win") > -1) {
      ps = new PerfectScrollbar(mainPanel.current);
      document.body.classList.toggle("perfect-scrollbar-on");
    } 
    return () =>{
      ps.destroy();
      document.body.classList.toggle("perfect-scrollbar-on");
  
    }
  },[]);


  useEffect((e)=>{
    if (e.history.action === "PUSH") {
      mainPanel.current.scrollTop = 0;
      document.scrollingElement.scrollTop = 0;
    }
  },['history']);
...