javascript - 本项目如何将 React 类组件转换为函数组件

Question

import React, { Component } from 'react';
import { Route } from 'react-router-dom';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import * as baseActions from '../../redux/modules/base';
import { AuthWrapper } from '../../components/Auth';
import { Login, Register } from '../../containers/Auth';

class Auth extends Component {
  // 페이지에 진입 할 때 헤더를 비활성화
  componentWillMount() {
    this.props.BaseActions.setHeaderVisibility(false);
  }

  // 페이지에서 벗어 날 때 다시 활성화
  componentWillUnmount() {
    this.props.BaseActions.setHeaderVisibility(true);
  }

  render() {
    return (
      <AuthWrapper>
        <Route path="/auth/login" component={Login} />
        <Route path="/auth/register" component={Register} />
      </AuthWrapper>
    );
  }
}

export default connect(
  (state) => ({

  }),
  (dispatch) => ({
    BaseActions: bindActionCreators(baseActions, dispatch)
  })
)(Auth);

我想把这个文件转换成函数组件我试过这样的

const Auth = (BaseActions) => {
  useEffect(() => {
    BaseActions.setHeaderVisibility(false);
    return BaseActions.setHeaderVisibility(true);
  })

但是发生了错误 enter image description here

我不知道this.props所以我想知道如何转换这个类组件

Answer 1

BaseActions.setHeaderVisibility 不是你的函数，因为你还没有解构你的 Prop 数据。现在 BaseAction 被视为此组件的 Prop 。

以下片段中提到了消除此问题的方法:

const Auth=(props)=>{
const { BaseActions, ...rest} = props;
useEffect(() => {
BaseActions.setHeaderVisibility(false);
return () => BaseActions.setHeaderVisibility(true);
}, []);

或

const Auth=({ BaseActions, ...rest})=>{
useEffect(() => {
BaseActions.setHeaderVisibility(false);
return () => BaseActions.setHeaderVisibility(true);
}, []);

或

这里的点点代表在连接包装器中定义的 Prop 的名称。

const Auth=({ BaseActions, ... , .... , ... , otherProps})=>{
useEffect(() => {
BaseActions.setHeaderVisibility(false);
return () => BaseActions.setHeaderVisibility(true);
}, []);