Question

首先我很少使用函数式组件，但这次我需要使用它。 所以，我有一个名为 Login 的组件，它使用 redux ：

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getLoginData } from "../../redux/actions/LoginActions";

function Login() {
  useEffect(() => {
    const { getLoginData } = this.props;
    getLoginData("test");
  }, []);
  return (
    <div>
      <h1>Login</h1>
    </div>
  );
}

const mapStateToProps = (state) => ({
  login: state.login,
});

const mapDispatchToProps = (dispatch) => ({
  getLoginData: (value) => dispatch(getLoginData(value)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

它产生错误，因为 this 未定义。 但是，如果我将其更改为这样的类组件：

import React from "react";
import { connect } from "react-redux";
import { getLoginData } from "../../redux/actions/LoginActions";

class Login extends React.Component {
  componentDidMount() {
    const { getLoginData } = this.props;
    getLoginData("test");
  }
  render() {
    return (
      <div>
        <h1>Login</h1>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  login: state.login,
});

const mapDispatchToProps = (dispatch) => ({
  getLoginData: (value) => dispatch(getLoginData(value)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

它将按预期工作（redux 也工作）。 问题是，如何将 this.props 传递给功能组件？

Answer 1

函数组件将它们的 props 作为参数传入该函数：

function Login(props) {
  useEffect(() => {
    props.getLoginData("test");
  }, []);
  // ...
}

// Or with destructuring:
function Login({ login, getLoginData }) {
  useEffect(() => {
    getLoginData("test");
  }, []);
  // ...
}

也就是说，如果您使用的是函数组件，那么使用 use hooks 而不是 connect 会更简单：

function Login() {
  const login = useSelector(state => state.login);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getLoginData("test"));
  }, []);
  //...
}

// Note that there is no mapStateToProps/mapDispatchToProps/connect here
export default Login;

Answer 2

根据 React docs，您将 props 对象传递给函数并访问作为 props 属性的值。

因此，对于您的实施，您应该这样做：

function Login(props) {
  useEffect(() => {
    props.getLoginData("test");
  }, []);
  return (
    <div>
      <h1>Login</h1>
    </div>
  );
}

或者，您可以将 function Login(props) 替换为 function Login({getLoginData}) 以解开值并将 props.getLoginData("test") 替换为 getLoginData("test")。

如何将此道具传递给功能组件

2 个答案: