我正在开展我的第一个React / Redux项目,我有一个问题.我已阅读文档,并观看了
https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist提供的教程.
但我还有一个问题.这是一个登录页面.
所以我有一个名为LoginForm的演示组件：
组件/ LoginForm.js
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组件)：
集装箱/ Login.js
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);
正如你所看到的,我使用redux提供的connect方法来创建我的容器.
我的问题如下：
如果我想要我的登录容器使用多个视图(例如：LoginForm和errorList显示错误),我需要手动(不连接,因为connect只有一个参数).就像是 ：
class Login extends Component {
render() {
return (
<div>
<errorList />
<LoginForm onSubmitLogin={ (id,pass)) } />
</div>
)
}
}
这是不好的做法吗？最好创建另一个使用errorList和LoginForm的演示组件(LoginPage),并创建一个连接到LoginPage的容器(登录)？
编辑：如果我创建第三个演示组件(LoginPage),我必须传递两次数据.像这样：集装箱 – > 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))
}
};
// `LoginForm` is being passed,so it would be the "container"
// component in this scenario
export default connect(null,mapdispatchToProps)(LoginForm);
即使它在一个单独的模块中,您在这里做的是直接连接您的LoginForm.
相反,你可以做的是这样的：
集装箱/ Login.js
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))
}
};
const mapStatetoProps = (state) => {
return {
errors: state.errors
};
};
export default connect(mapStatetoProps,mapdispatchToProps)(Login);
注意,Login组件现在被传递给connect,使其成为“容器”组件,然后errorList和LoginForm都可以被表示.他们的所有数据可以通过登录容器的道具传递.