分离表现和逻辑组件 react/redux答案

【问题标题】：Separating presentational and logic components react/redux分离表现和逻辑组件 react/redux
【发布时间】：2016-05-07 14:56:10
【问题描述】：

我正在尝试清理我的组件，以便我的容器处理逻辑并且我的组件仅用于展示。我正在使用 Redux 将我的商店连接到容器/组件。

我正在尝试这个简单的代码，但我不确定它为什么不起作用以及我缺少什么。

以前我有，而且效果很好：

var Main = React.createClass({
    render: function(){
       var style = this.props.hover;
       var actions = this.props.actions;
       return (
           <div>
              <Bullet style={style} actions = {actions}/>
           </div>
       );
    }
});

function mapStateToProps(state) {
   return {
      hover: state.hover
   }
}

function mapDispatchToProps(dispatch) {
  return {
     actions: Redux.bindActionCreators(actions, dispatch)
  }
}

var MainConnected = connect(mapStateToProps, mapDispatchToProps)    (Main);


module.exports = MainConnected;

这是我的Bullet 组件：

var Bullet = React.createClass({
   over: function(){
      this.props.actions.ON();
   },
   out: function(){
      this.props.actions.OFF();
   },
   render: function(){
      var style = this.props.style;
      return(
         <div id="bullet" style = {style} onMouseOver = {this.over} onMouseOut = {this.out}></div>
      );
   }
   });

现在，我尝试了这个：

var Main = React.createClass({
    over: function(){
        console.log('hey');
    },
    out: function(){
        this.props.dispatch(actions.OFF()); 
    },
    render: function(){
        var style = this.props.hover;
        return (
            <div>
                <Bullet id="Git" style={style} onMouseOver = {this.over} onMouseOut = {this.out}/>
            </div>
        );
    }
});

//and Bullet component

var Bullet = React.createClass({
    render: function(){
        var style = this.props.style;
        return(
            <div id="bullet" style = {style} ></div>
        );
    }
});

我从 Button 中删除了 over 和 out 逻辑，但从 Main 容器调用时它们不起作用。我想我也误解了如何使用this，因为没有调用console.log()。

感谢您为我指明了如何分离此逻辑的正确方向，并可能有助于理解 this 在 React 中的使用方式。谢谢！

【问题讨论】：

标签： javascript reactjs components redux

【解决方案1】：

哦，知道了。这有帮助：ReactJS: onClick handler not firing when placed on a child component

我必须将我的功能从父级传递给子级。所以代码看起来像这样：

var Main = React.createClass({
    over: function(){
        this.props.dispatch(actions.ON());  
    },
    out: function(){
        this.props.dispatch(actions.OFF()); 
    },
    render: function(){
    var style = this.props.hover;
        return (
            <div>
                <Bullet id="Git" style={style} over = {this.over} out = {this.out}/>
            </div>
        );
   }
});

var Bullet = React.createClass({
    render: function(){
        var style = this.props.style;
        var over = this.props.over;
        var out = this.props.out;
        return(
            <div id="bullet" style = {style} onMouseOver = {over} onMouseOut = {out}></div>
        );
    }
});

【讨论】：