我可以用“反应，终极版”“连接” HOC提供自定义选择到“通用”通过mapStateToProps反应的组分？

Question

我试图创建可重用的反应大的成分发生化学反应项目我的团队正在努力。例如，我有它由两个子组件，其每一个由另外的子组件中的一个面板上。

我连接到终极版商店的最佳位置是在顶层，并通过道具下来子和子子组件（我知道这违背有点终极版的目的，但除此之外，整个东西长太复杂）。

我的问题是如何提供不同的选择，以每本通用顶级部件的“实例”，使他们不得不给它们喂食不同的数据。我想出了解决的办法是在这会才真正由包裹在HOC“连接”功能的“通用”组件，并通过mapStateToProps通过自定义选择的另一个组成部分包裹每个“实例”。

也就是说，我有“通用组件

// GenericPanelComponent.js
class GenericPanelComponent extends React.Component {
...
// component code
}
export default GenericPanelComponent

然后每个“实例”将提供通过不同的数据“连接”

// SpecificInstance1.js 
import { connect } from 'react-redux';
import GenericPanelComponent from './GenericPanelComponent';


class SpecificInstance1 extends React.component {
// no code
}
const mapStateToProps = (state) => ({ specificInstanceData: specificInstance1Selector(state) });
export default connect(mapStateToProps)(GenericPanelComponent);

和

 // SpecificInstance2.js 
    import { connect } from 'react-redux';
    import GenericPanelComponent from './GenericPanelComponent';

 // SpecificInstance2.js 
    class SpecificInstance2 extends React.component {
    // no code
    }
    const mapStateToProps = (state) => ({ specificInstanceData: specificInstance2Selector(state) });
    export default connect(mapStateToProps)(GenericPanelComponent);

有没有什么概念或结构上错了这种方法？如果是这样，一个人如何进定制终极版选择和数据可重用的组件作出反应？感谢您的见解！

Answer 1

有什么不对这种方法，110C一样进行连接被设计成具有这样的优势。

要使用此有效，你就必须弄清什么道具你GenericPanelComponent需要和使用的连接功能提供给他们。我会在你的当前实现指出的唯一的事情是，当你做它的GenericPanelComponent应该不需要知道它是哪种类型的面板，所以它不应该有不同的道具

const mapStateToProps = (state) => ({ specificInstance1Data: specificInstance1Selector(state) });
const mapStateToProps = (state) => ({ specificInstance2Data: specificInstance2Selector(state) });

而不是数据应该在一个道具来通过

const mapStateToProps = (state) => ({ specificInstanceData: specificInstance1Selector(state) });
const mapStateToProps = (state) => ({ specificInstanceData: specificInstance2Selector(state) });