React-Redux：组件或容器中的表单？-Java 学习之路

我很难理解何时使用组件以及何时使用容器 . 我知道只有容器应该连接到商店，所有（表示性）组件都应该获得所有必要的输入作为道具 .

如果我想写一个登录页面，我会创建一个 LoginPage.js ，呈现 UserForm.js . 现在我不太明白如何从这里开始 . 我应该将UserForm连接到商店还是LoginPage，还是更好地编写一个呈现 LoginPage.js 并连接到商店的 LoginContainer.js ？

在最后一种情况下，如何在提交UserForm时调度（async，使用redux-thunk）操作 . 这在某种程度上必须从LoginPage完成，但LoginPage不知道任何提交，是吗？

我希望这个问题不要太模糊或不清楚 . 任何帮助将不胜感激！

干杯

1 回答

将 LoginPage.js 连接到redux存储并在其中呈现 LoginForm.js . 将所有必要的数据作为道具传递（也可以传递函数）

对于你的 LoginPage.js 将是这样的（我不是在这里写完整的代码）

onLogin(loginData) {
  // do what you wanna do on login and call routeActions to move another 
  page after successfull login 
}
render() {
 return(
   <LoginForm login={this.props.login} onLogin={this.onLogin} />
 );
}
 const mapStateToProps = (state) => ({
   login: state.login, // put your redux state here
 });
 export default connect(mapStateToProps)(LoginPage);

不要忘记申报道具......

你的 LoginForm.js 应该是这样的

render() {
  return (
     //some html stuff here(login form)
     // on submit call that method from props 
     // this.props.onLogin(pass login data here)
  );
}

我希望这会以某种方式帮助你 . 如果你在这里有任何查询...

回复于 2024-04-27T23:48:47+08:00

React-Redux：组件或容器中的表单？

1 回答

相关问题