Question

在我的组件类中，我this.props包含history对象，其中包含transitionTo函数。

render() {
    console.log(this.props)

    return (
      <div>
        <button onClick={actions.myAction}>My button</button>
      </div>

这里我的按钮正在调用myAction，当完成时想要路由到其他位置。我想在transitionTo中访问此action功能并执行类似router.transitionTo("/page1")

的操作

为此，我应该获得包含history函数的transitionTo对象。那么如何将this.props.history对象传递给动作呢？当我执行onClick={actions.myAction(this.props.history)}时，我的按钮没有被渲染..

任何帮助

Answer 1

我不同意你的方法，但是找到解决问题的方法：

handleBtnClick() {
  actions.MyAction(this.props.history);
}

render() {
  return (
    <div>
       <button onClick={ this.handleBtnClick.bind(this) }>My button</button>
    </div>
  );
}

当您点击按钮时，会调用handleBtnClick()功能，您可以在此处调用您的动作并传递您想要的任何道具。

onClick需要一个函数表达式（计算函数表达式的东西）。你不应该在那里进行复杂的调用，例如actions.myAction(this.props.history)。

我建议您考虑使用react-router-redux并使用routeActions和自定义redux中间件来处理网址转换。如果你有兴趣，我可以扩展这种方法。

修改

如果您使用react-router-redux，那么您应该利用routeActions中的方法。在这种情况下，您需要的方法是push()。因此，如果您想要转换到 / user / account 网址，只需拨打dispatch(routeActions.push('/user/account'))并使用react-router-redux来处理转换。

例如：

import { routeActions } from 'react-router-redux'; // Action creator function mySuperAction(flag) { return (dispatch, getState) => { dispatch(routeActions->push('/user/account')); } });

您需要使用react-router-redux正确设置商店才能实现此目的。

或者来自一个组件：

import { routeActions } from 'react-router-redux'; import { connect } from 'react-redux'; import React from 'react'; class MyComponent extends React.Component { handleClick() { this.props.dispatch(routeActions.push('/user/account')); } render() { return ( <div> <button onClick={ this.handleClick.bind(this) }>My button</button> </div> ); } } export default connect()(MyComponent);

Answer 2

上面的答案是正确的，但是在迁移到"Stateless Components"时会崩溃，这很快就会崩溃。我的建议是使用高阶函数来处理防止默认点击操作和提供正确参数的处理。如果您已经在使用ES2015（例如通过Babel），这可能就是这么简单：

colors.less

然后在您的组件中调用如下：

const preventDefault = (fn, ...args) => (e) => {
  e.preventDefault();
  fn(...args);
};

react redux将this.props传递给组件的动作

2 个答案: