动态提供组件到 Redux 容器

Question

我有一个基本的 redux 容器：

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;

这个完全相同的容器与多个 React 组件一起使用 - 每个组件使用相同的道具并发出相同的事件，但除此之外彼此之间有很大不同。我不想为每个组件重复相同的容器，而是想要一种将组件传递给容器的方法。相当于：

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

动态提供组件到 Redux 容器

Dynamically Supply Component To Redux Container

reactjs

redux

react-redux