我遇到了一个问题因为我有一个相当复杂的组件来呈现项目列表。项目列表直接从redux状态树中获取。我希望有两个单独的路由重用这个相同的组件,但每个路由都将连接到状态树中的不同列表。
这是一个简化的例子:
从州树开始:
state = {
fruits: ['apple', 'banana', 'grape', 'pear'],
vegetables: ['celery', 'carrot', 'cucumber']
}
和一个简单的列表组件
class ListView extends Component {
render() {
return (
<div>
{this.props.items.map((item, index) =>
<div key={index}>{item}</div>
)}
</div>
)
}
}
function mapStateToProps(state) {
return {
items: state.fruits
}
}
export default connect(mapStateToProps)(ListView)
更高级别的App组件如下所示:
class App extends Component {
render() {
return (
<div>
{this.props.children}
</div>
)
}
}
export default connect()(App)
路线看起来像这样:
<Route path='/' component={App}>
<IndexRedirect to='fruits' />
<Route path='fruits' component={ListView} />
<Route path='vegetables' component={ListView} />
</Route>
现在,ListView组件已连接到redux状态的fruits部分。但是我想在这里使用路线结构,所以'/ fruits'和'/ vegetables'都会使用相同的组件,但'/ fruits'会列出水果,而'/ vegetables'会列出蔬菜。
显而易见的解决方法是创建一个全新且相同的组件类,并更改mapStateToProps方法以连接到vegetables数组。
有没有办法重用这个组件,但可以访问每个组件中状态树的不同部分?
答案 0 :(得分:6)
从ListView中,您可以将FruitsList和VeggiesList导出为单独的组件,然后根据路径显示正确的组件。
class ListView extends Component {
render() {
return (
<div>
{this.props.items.map((item, index) =>
<div key={index}>{item}</div>
)}
</div>
)
}
}
function mapStateToPropsVeggies(state) {
return {
items: state.veggies
}
}
function mapStateToPropsFruits(state) {
return {
items: state.fruits
}
}
const VeggiesList = connect(mapStateToPropsVeggies)(ListView);
const FruitsList = connect(mapStateToPropsFruits)(ListView);
export default ListView;
export {
VeggiesList,
FruitsList
};
然后将路由器更新为:
<Route path='/' component={App}>
<IndexRedirect to='fruits' />
<Route path='fruits' component={FruitsList} />
<Route path='vegetables' component={VeggiesList} />
</Route>