私は大規模なアプリケーションを設計しており、反応ルーティングの問題に悩まされています。このルーティング/小道具/パラメーターの競合を解決する方法を知りたいです。
基本的な手順は次のとおりです。
Login ->
Choose classroom (get classroom._id) ->
Load BaseLayout (this retrieves the classroom from the DB) ->
Load RosterLayout (or any other subdivision of the application (schedule, photos, etc.)
教室の各ページ (スケジュール、名簿など) は独自のミニ アプリケーションであるため、react-router を使用してこれらのレイアウト コンポーネントをロードすると思います。ただし、子コンポーネント内classroomのコンポーネント内でロードされたコンポーネントを使用できるように構造化する方法がわかりません。BaseLayoutこの例では、経由の URL を渡そうとしましたが、教室を再度_id取得する必要がありますが、これは適切なアーキテクチャとは思えず、いつ準備ができているかを知ることができません。URLパラメーター以外に、このシナリオを処理するより良い方法または別の方法はありますか? 反応ルーター経由でロードされた子コンポーネントに小道具を渡すことはできますか?classroom_loading
基本的なコードは次のとおりです。
Meteor.startup(() => {
render((
<Router history={browserHistory}>
<Route path="/classroom/:classroomId" component={BaseLayoutContainer}>
<Route path="roster" component={RosterLayout} />
</Route>
</Router>
), document.getElementById('app'));
});
class BaseLayout extends React.Component {
render() {
return(
<div id="base">
<div id="headerContainer">
</div>
<div id="navContainer">
<div className="classroomHeader">
{this.props.classroom_loading ?
<h3>loading...</h3> :
<h2>{this.props.classroom.name}</h2>
}
</div>
</div>
<div id="bodyContainer">
{this.props.children}
</div>
</div>
)
}
}
export default BaseLayoutContainer = createContainer((params) => {
let classroom_loading = Meteor.subscribe("classroom.byId", params.params.classroomId);
return {
currentUser: Meteor.user(),
classroom_loading: !classroom_loading.ready(),
classroom: Classrooms.findOne({}),
};
}, BaseLayout);
export class RosterLayout extends React.Component {
render() {
return (
<div id="rosterLayout">
{this.props.children_loading ?
<span>loading...</span> :
<ul>
{this.props.children.map((child) => {
return <li>child.name</li>;
})}
</ul>
}
</div>
);
}
}
export default RosterLayoutContainer = createContainer((params) => {
let children_loading = Meteor.subscribe("children.byClassroom", params.params.classroomId);
return {
children_loading: !children_loading.ready(),
children: Children.findOne({}),
};
}, RosterLayout);