React-Redux，两个相同的组件，但不同的 mapStateToProps答案

【问题标题】：React-Redux, two same components, but different mapStateToPropsReact-Redux，两个相同的组件，但不同的 mapStateToProps
【发布时间】：2018-09-24 02:23:53
【问题描述】：

我需要两个具有相同功能的组件，但我想将不同的状态属性映射到道具。我如何让它保持干燥（不仅仅是两个独立的组件，代码几乎相同）？以下是其中一个组件的简化版本：

import React, { Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';

class MyComponent extends Component{
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps){

  }
  render (){
    return (
      <div className=""> 
        <div>
          {this.props.someDate}
        </div>

      </div>
    )    
  }
}

function mapStateToProps(state){
    return {
      someData: state.publications.someData
    }
}

export default connect( mapStateToProps, {})(MyComponent)

其他组件完全一样，但是 mapStateToProps 应该是这样的：

   function mapStateToProps(state){
        return {
          someData: state.articles.someData
        }
    }

【问题讨论】：

我也会对此非常感兴趣！
为什么不简单地导出通过将connect 应用到每个mapStateToProps 和MyComponent 而创建的两个组件？
你能详细说明一下吗？这一切都在一个文件中吗？

标签： react-redux

【解决方案1】：

您可以与他们的父母一起做，而不是将myComponent 连接到redux 状态。父组件：

import React, {Component} from 'react';
import {connect} from "react-redux";
import Child from 'Child.js'

const mapStateToProps = state => {
   return {
       someData: someData: state.publications.someData
   };
};

 class Parent extends Component {
       render (){
           retrun <Child data={this.props.someData}
       }
 }
 export default connect( mapStateToProps, null)(Parent)

然后你会得到这样的可重复使用的孩子：

....
export default class Child extends Component {
    render() {
        return (
           <div className=""> 
              <div>{this.props.data}</div>
           </div>
        )    
    } 
}

【讨论】：