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容器供应组件

1 个答案: