1
私は大規模なアプリケーションを設計しており、反応経路の問題を抱えています。私はこのルーティング/ props/paramsの競合をどのように処理するかを知りたいです。ここで大規模なアプリケーション構造
は、基本的な手順です：教室（スケジュール、名簿など）の各ページは、それがミニアプリケーションを所有していているので
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.)
、私は私が反応し、ルータを使用して、これらのレイアウト・コンポーネントをロードすると思います。しかし、子コンポーネントの内部にBaseLayoutコンポーネント内にロードされたclassroomを使用できるように、どのように構造化するかを理解することはできません。この例ではURLを介して_idを渡そうとしましたが、まだ教室を取得する必要がありますこれは良いアーキテクチャのようではありません。準備が整ったら、classroom_loadingは利用できません。このシナリオをURLパラメータ以外にも処理する方法はありますか？反応ルータ経由でロードされた子コンポーネントに小道具を渡すことはできますか？私は不和の#reactifluxサーバに@slightlytylerするのに最適なソリューションのおかげで見つけた
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);