我正在用 React 开发一个课程安排应用程序，我用它作为学习 redux 的机会。我当前正在设计一个浏览菜单（作为浏览组件实现），它在加载时显示大学中的学校列表。当用户单击其中一所学校时，它会显示该学校内的科目列表。但是，我希望学校显示为网格（两列），并且我希望科目显示为列表（一列）。他们可能还需要将不同的道具提供给浏览组件。
我该怎么做呢？目前，我有一个 Browse 组件和一个 BrowseReduxContainer 组件。 BrowseReduxContainer 组件使用react-redux 中的connect()、mapStateToProps 和mapDispatchToProps 来填充Browse 的props。当我只是显示学校时，这效果很好，但我不确定如何根据州修改浏览的布局。我应该根据状态给 connect() 不同的组件吗？或者我应该在浏览组件中实现逻辑来检查道具并相应地显示网格/列表？或者完全是别的什么？
动作.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;
BrowseReduxContainer.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 https://github.com/Joonpark13/serif.nu/tree/feature/browse
UPDATE:此时我最好的猜测是拥有不同的视图组件及其自己适当的道具（可能称为 BrowseA 和 BrowseB），并根据状态连接适当的组件。我想将此逻辑包含在 BrowseReduxContainer 内的 mapDispatchToProps 中，但后来我意识到 mapDispatchToProps 函数不将状态作为参数。我很乐意提供任何建议！
