Reactjs 如何从三级以下的子组件分派操作？

我目前在设计React应用程序时遇到了这个问题，我似乎无法找到答案

因此，我的应用程序对React路由器中的组件具有以下继承权

应用程序 ->动态容器 ->->LoginComponent

现在，LoginComponents具有表单元素以获取用户名和密码

我有userActionCreators来处理登录，登录完成后它会成功发送登录，但我似乎找不到正确的方法将我的LoginComponent连接到发送操作或调用actionCreators

我该怎么做？如有任何建议，将不胜感激。

两种选择：

通过

props

对象将绑定的actionCreator从容器（连接到Redux）向下传递到子组件（未连接到Redux）

考虑在项目中采用

---

一种选择是使用

connect

将单用途表单绑定到它们的操作。由于

通常总是做完全相同的事情，因此您可以这样使用它：

import React from 'react';
import * as userActionCreators from '../actions/users';
import { connect } from 'react-redux';

export class LoginComponent extends React.Component {
   static propTypes = {
     login: React.PropTypes.func.isRequired
   }

   render() { 
     const { login } = this.props;
     const { username, password } = this.state;

     return (
       <form onSubmit={ () => login(username, password) }>
         ...
       </form>
     );
   }
}

export default connect(null, userActionCreators)(LoginComponent);

作为参考，

userActionCreators

：

const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_FAILED = 'LOGIN_FAILED';

export function login(username, password) {
  if (username === 'realUser' && password === 'secretPassword') {
    return { type: LOGIN_SUCCESS, payload: { name: 'Joe', username: 'realUser' } };
  } else {
    return { type: LOGIN_FAILED, error: 'Invalid username or password };
  }
}

---

如果我理解正确，如果你阅读，你会找到你可能要找的例子

有应用程序组件，连接到Redux，还有其他组件：添加Todo，TodoList，Todo和页脚

App调用TodoList调用Todo的应用程序，用户可以在其中单击某个内容。此单击将在回调后返回回调，从Todo到TodoList到App，详情如下：

应用程序使用

dispatch（completeTodo（index））}/>

TodoList调用

this.props.onTodoClick（index）}/>

Todo组件具有

和

onClick={this.props.onClick}

属性

---

因此，向后看，当有人在Todo组件中单击时，将调用

this.props.onClick

，它将调用

this.props.onTodoClick（index）

fromTodoList（注意可选添加的参数索引），最后，这将调用函数

dispatch（completeTodo（index））

fromApp

当继承人权限由react router定义时，如何通过boundActionCreator，其中不同的子组件连接到充当占位符的DynamicContainer组件。我只是在DynamicContainer组件中有{this.props.children}。所以您正试图将动作创建者从应用程序的根目录通过react router传递到某种登录表单组件中？谢谢！你能补充回答<代码>用户行为>代码>吗？我添加了代码> UsActualSurvivs<代码>示例，并扩展到<代码>连接< /代码>。谢谢帮助，在中间代码块中，你忘了从<代码>中提取<代码>调度< /代码>。

const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_FAILED = 'LOGIN_FAILED';

export function login(username, password) {
  if (username === 'realUser' && password === 'secretPassword') {
    return { type: LOGIN_SUCCESS, payload: { name: 'Joe', username: 'realUser' } };
  } else {
    return { type: LOGIN_FAILED, error: 'Invalid username or password };
  }
}