動的電源コンポーネントにReduxのコンテナ

Question

：

import { connect } from 'react-redux'; 
import Renderer from '../components/renderers/AlphaRenderer/AlphaRenderer'; 

const mapStateToProps = state => ({ 
    ... 
}); 

const mapDispatchToProps = dispatch => ({ 
    ... 
}); 

const RendererContainer = connect(mapStateToProps, mapDispatchToProps)(AlphaRenderer); 

export default RendererContainer; 

はこの全く同じ容器が複数で使用されるコンポーネントを反応させる - 各成分が同じ小道具を使用し、同じイベントを発し、それ以外互いに非常に異なっています。各コンポーネントに対して同じコンテナを繰り返すのではなく、コンポーネントをコンテナに渡す方法が必要です。同等のもの：

<RendererContainer component={AlphaRenderer} /> 
<RendererContainer component={BetaRenderer} /> 
<RendererContainer component={CharlieRenderer} /> 

実行時にコンポーネントをコンテナに渡す方法はありますか？

Answer 1

あなたは明らかに動作しません

//just the connect function 
const RendererContainer = connect(mapStateToProps, mapDispatchToProps); 

//react component 
const ReduxWrapperComponent = (props) => (return React.createElement(RendererContainer(props.component));) 

or 
const ReduxWrapperComponent = (props) => (return <div>{RendererContainer(props.component)}</div>;) 

//use it as 
//<ReduxWrapperComponent component={XYZ}/>