Question

我需要两个具有相同功能的组件，但我想将不同的属性属性映射到props。如何保持DRY（不仅仅有两个独立的组件，大部分代码相同）？以下是其中一个组件的简化版本：

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
        }
    }

Answer 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>
        )    
    } 
}

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

1 个答案: