React＆Redux：connect（）到多个组件和最佳实践

Z时代
2024-01-10
分类：问答

我正在做我的第一个React /

Redux项目，我有一个小问题。我已经阅读了文档，并观看了https://egghead.io/lessons/javascript-redux-

generating-containers-with-connect-from-react-redux-

visibletodolist上可用的教程。

但我还有一个问题。关于登录页面。所以我有一个名为LoginForm的演示组件：

import { Component, PropTypes } from 'react'
class LoginForm extends Component {
render () {
      return (
         <div>
            <form action="#" onSubmitLogin={(e) => this.handleSubmit(e)}>
               <input type="text" ref={node => { this.login = node }} />
               <input type="password" ref={node => { this.password = node }} />
               <input type="submit" value="Login" />
            </form>
         </div>
      )
   }
   handleSubmit(e) {
      e.preventDefault();
      this.props.onSubmitLogin(this.login.value, this.password.value);
   }
}
LoginForm.propTypes = {
   onSubmitLogin: PropTypes.func.isRequired
};
export default LoginForm;

还有一个名为Login的容器组件，它将数据传递给我的组件。使用react-redux-

router，我将此容器（而不是presentationnal组件）称为：

import { connect } from 'react-redux'
import { login } from '../actions/creators/userActionCreators'
import LoginForm from '../components/LoginForm'
const mapDispatchToProps = (dispatch) => {
   return {
      onSubmitLogin: (id, pass) => dispatch(login(id, pass))
   }
};
export default connect(null, mapDispatchToProps)(LoginForm);

如您所见，我正在使用connectredux提供的方法来创建我的容器。

我的问题是以下问题：

如果我希望我的Login容器使用多个视图（例如：LoginForm和errorList来显示错误），则需要手动执行（不使用connect，因为connect只接受一个参数）。就像是

：

class Login extends Component {
   render() {
      return (
         <div>
            <errorList />
            <LoginForm onSubmitLogin={ (id, pass) => dispatch(login(id, pass)) } />
         </div>
      )
   }
}

这是不好的做法吗？是否最好创建同时使用errorList和LoginForm的另一个表示性组件（LoginPage），并创建要登录connect到LoginPage

的容器（Login）？

如果我创建第三个演示组件（LoginPage），我将不得不两次传递数据。这样：Container -> LoginPage ->

LoginForm & ErrorList。即使有上下文，这似乎也不是要走的路。

回答：

我认为第二个示例中的内容非常接近。您只能创建一个已连接的容器组件，并呈现多个演示组件。

在第一个示例中，实际上没有单独的容器组件：

import { connect } from 'react-redux'
import { login } from '../actions/creators/userActionCreators'
import LoginForm from '../components/LoginForm'
const mapDispatchToProps = (dispatch) => {
   return {
      onSubmitLogin: (id, pass) => dispatch(login(id, pass))
   }
};
// `LoginForm` is being passed, so it would be the "container"
// component in this scenario
export default connect(null, mapDispatchToProps)(LoginForm);

即使它在单独的模块中，您在这里所做的还是LoginForm直接连接您的模块。

相反，您可以执行以下操作：

import { connect } from 'react-redux'
import { login } from '../actions/creators/userActionCreators'
import LoginForm from '../components/LoginForm'
import ErrorList from '../components/ErrorList'
class Login extends Component {
   render() {
      const { onSubmitLogin, errors } = this.props;
      return (
         <div>
            <ErrorList errors={errors} />
            <LoginForm onSubmitLogin={onSubmitLogin} />
         </div>
      )
   }
}
const mapDispatchToProps = (dispatch) => {
   return {
      onSubmitLogin: (id, pass) => dispatch(login(id, pass))
   }
};
const mapStateToProps = (state) => {
   return {
       errors: state.errors
   };
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);