我正在 React 中开发课程安排应用程序，并将其用作学习 redux 的机会。我目前正在设计一个浏览菜单（作为 Browse 组件实现），它在加载时显示大学中的学校列表。当用户单击其中一所学校时，它会显示该学校内的科目列表。但是，我希望学校显示为网格（两列），并且我希望将科目显示为列表（一列）。他们也可能需要将不同的props提供给 Browse 组件。
我该怎么做呢？目前，我有一个 Browse 组件和一个 BrowseReduxContainer 组件。BrowseReduxContainer 组件使用 react-redux 中的 connect()、mapStateToProps 和 mapDispatchToProps 来填充 Browse 的 props。当我只显示学校时，这很好用，但我不确定如何根据状态修改 Browse 的布局。我应该根据状态给 connect() 不同的组件吗？或者我应该在 Browse 组件中实现逻辑来检查props并相应地显示网格/列表？或者完全是别的什么？
动作.js
export function showSubjects(schoolId) {
return {
type: 'SHOW_SUBJECTS',
schoolId
};
}
浏览器.js
const initialState = {
currentView: 'schools',
schools: [{id: 'AAAA', name: 'aaaa'}, {id: 'BBBB', name: 'bbbb'}],
subjects: [{id: 'CCC', name: 'ccc'}, {id: 'DDD', name: 'ddd'}]
};
function browse(state = initialState, action) {
switch (action.type) {
case 'SHOW_SUBJECTS':
return {
...state,
currentView: 'subjects'
};
default:
return state;
}
}
export default browse;
浏览ReduxContainer.jsx
import { connect } from 'react-redux';
import { showSubjects } from '../actions/actions';
import Browse from '../components/Browse.jsx';
function propsFilter(state) {
switch (state.currentView) {
case 'schools':
return state.schools;
case 'subjects':
return state.subjects;
default:
throw new Error(`No such view: ${state.currentView}`);
}
}
const mapStateToProps = (state) => ({
schools: propsFilter(state)
});
const mapDispatchToProps = (dispatch) => ({
showSubjects: (schoolId) => {
dispatch(showSubjects(schoolId));
}
});
const BrowseReduxContainer = connect(mapStateToProps, mapDispatchToProps)(Browse);
export default BrowseReduxContainer;
浏览.jsx
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const Browse = (props) => (
<div>
{props.schools.map((school) => (
<RaisedButton key={school.id} label={school.name} onClick={props.showSubjects(school.id)} />
))}
</div>
);
export default Browse;
其他相关文件，如有需要，可以在这里查看：https : //github.com/Joonpark13/serif.nu/tree/feature/browse
更新： 在这一点上，我最好的猜测是让不同的视图组件具有自己的适当props，也许称为 BrowseA 和 BrowseB 并根据状态连接适当的一个。我想将此逻辑包含在 BrowseReduxContainer 内的 mapDispatchToProps 中，但后来我意识到 mapDispatchToProps 函数不将状态作为参数。我喜欢任何建议！