2
ここでは例のようにマスターディテールのナビゲーションを作成しています。the react router example;React Routerのマスターディテール：childrenコンポーネントは、ページの更新まで新しいビューをレンダリングしません。
私はナビゲーションパネルCheckpointNav（リンク）、およびデータ・コンポーネントOneCheckpointData（負荷時にこの男fetchsデータをレンダリングするコンテナコンポーネントOneCheckpointContainerを、持っている、とOneCheckpointViewをレンダリングします。
とき、私のリンクのいずれかをクリックCheckpointNavブラウザのURLを変更する以外は何も起こりません。新しいデータが取得されたページをリフレッシュし、新しいコンポーネントが子ビューでレンダリングされるまでではありません（エラーもありません）
Iこのバグが存在するかどうかは確かではありません。なぜなら、子コンポーネントがデータのフェッチを担当するだけでなく、 w。
<Route path="/modules/:id" component={OneCheckpointContainer}>
<Route path="/modules/:id/checkpoints/:cp_id" component={OneCheckpointData} />
</Route>
ここOneCheckpointContainer
import React from 'react';
import CheckpointNav from './CheckpointNav';
class OneCheckpointContainer extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
checkpoints: null,
user: null
};
}
componentWillMount() {
this.loadCheckpoints();
this.context.getUser((data) => this.setState({ user: data }));
}
loadCheckpoints() {
$.ajax({
url: `/api/v1/modules/student/${this.props.params.id}/checkpoints`,
method: 'GET',
}).done((data) => {
this.setState({ checkpoints: data });
});
}
render() {
return (
<div>
<div className="col-xs-3">
<CheckpointNav mid={this.props.params.id} checkpoints={this.state.checkpoints} />
</div>
<div className="col-xs-9">
{ this.props.children || <div>No Children Yet</div>}
</div>
</div>
)
}
}
OneCheckpointContainer.displayName = OneCheckpointContainer;
OneCheckpointContainer.contextTypes = {
getUser: React.PropTypes.func.isRequired
};
export default OneCheckpointContainer;
が、私は信じていませんが、バグがここにあるCheckpointNav次のとおりです：ここで
は私がルートを設定している方法です
import React from 'react';
import NavLink from '../widgets/NavLink';
const CheckpointNav = (props) => {
const checkpointList = props.checkpoints && props.checkpoints.length > 0 ?
props.checkpoints.map((item) => {
return <li key={item.cp._id} className="list-group-item">
<NavLink className="nav-link" to={"/modules/" + props.mid + "/checkpoints/" + item.cp._id}>
{ item.cp.title}</NavLink></li>
}) : <div>No CPS</div>;
return (
<div className="card one-module-card">
<div className="card-block modules-card-body">
<ul className="list-group tags-group">
{ checkpointList }
<li className="list-group-item new-cp"><NavLink className=""
to={'/post/checkpoint/' + props.mid}
>
New Checkpoint
</NavLink></li>
</ul>
</div>
</div>
);
};
export default CheckpointNav;
OneCheckpointData は、それがirrelavantなければならないので、私はOneCheckpointViewを残しています**新しいデータを取得し、私は
import React from 'react';
import CheckpointView from './CheckpointView';
class OneCheckpointData extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
checkpoint: null,
user: null
};
}
componentWillMount() {
this.loadCheckpoint();
this.context.getUser((data) => this.setState({ user: data }));
}
loadCheckpoint() {
$.ajax({
url: `/api/v1/modules/three/cp/${this.props.params.cp_id}`,
method: 'GET',
}).done((data) => {
this.setState({ checkpoint: data });
});
}
render() {
return this.state.checkpoint ? <CheckpointView user={this.state.user} checkpoint={this.state.checkpoint} /> : null;
}
}
OneCheckpointData.displayName = OneCheckpointData;
OneCheckpointData.contextTypes = {
getUser: React.PropTypes.func.isRequired
};
export default OneCheckpointData;
を更新しない限り、新しいレンダリングされません**
あなたは何をしようとしているのか分かりますが、this.propsをargとしてcomponentWillMountに渡すことはできません – fresh5447