发生什么事件组件为空
当听到我的概念代码时：
我的应用以及div和导入要求中的更多组件
<Link>
export default class App extends Component{
render(){
return(
<div id="app">
<AppNav />
{this.props.children}
</div>
);
}
}
render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Content}>
<IndexRoute component={MoviesGrid} />
<Route path="genre/:title" component={MoviesGrid}/>
</IndexRoute>
</Route>
</Router>
),document.getElementById("body"));
export default class Content extends Component {
render(){
return(
<div>
<MoviesBanner/>
<div className="container-content">
{this.props.children} {/*Not work*/}
<MoviesGrid /> {/*Work*/}
<RightBar />
</div>
</div>
);
}
}
export default class MoviesGrid extends Component {
loadGridMovies(){
$.ajax({
type:'GET',
crossDomain: true,
url: this.props.source,
dataType: 'JSON',
cache: false,
contentType: "application/x-www-form-urlencoded",
success: function(data) {
this.setState({items: data.gridContent.items});
}.bind(this),
error: function(xhr, status, err) {
console.error(status, err.toString());
}.bind(this)
});
}
componentDidMount() {
this.loadGridMovies();
}
constructor(props) {
super(props);
this.state = {items:[]};
this.props.source = (this.props.params.source ? this.props.params.source : 'http://MyApi?client=web');
this.loadGridMovies = this.loadGridMovies.bind(this);
}
render(){
let render_item = this.state.items.map(function(getRow,i){
return(
<GridMovieItem key={i} data={getRow}/>
);
});
return (
<div className="moviesgrid col-sm-8 col-xs-12">
<div className="moviesgrid-header">Action</div>
<div className="moviesgrid-body">
{render_item}
</div>
</div>
);
}
}
在{this.props.children}（BrowseBtn）文件
<MoviesGrid /> export default class BrowseBtn extends Component {
loadMenuBrowse(){
$.ajax({
type:'GET',
crossDomain: true,
url: this.props.source,
dataType: 'JSON',
cache: false,
contentType: "application/x-www-form-urlencoded",
success: function(data) {
this.setState({data: data.menuItems});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.source, status, err.toString());
}.bind(this)
});
}
constructor(props) {
super(props);
this.state = {data:[]};
this.loadMenuBrowse();
}
render(){
let render_item = this.state.data.map(function(getRow,i){
let title = getRow.title;
let targetUrl = getRow.targetUrl;
return (
<li className="col-sm-4 col-xs-3" key={i}><Link to={`/genre/${title}`} params={{ source: targetUrl }}>{title}</Link></li>
);
});
return (
<Nav>
<NavDropdown className="browseBtn" title="Browse" id="basic-nav-dropdown">
{render_item}
</NavDropdown>
</Nav>
);
}
}
不起作用且反应检查为空
但是显示Warning: [react-router] Location "/genre/Thriller" did not match any routes。
链接是：
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
当我点击链接时：{{1}}（惊悚片是流派）
请帮助我。感谢。答案 0 :(得分：0)
我不认为<IndexRoute />接受任何儿童路线。你可能正在寻找类似的东西：
<Route path="/" component={App}>
<IndexRoute component={Content}>
<Route path="content" component={Content}>
<IndexRoute component={MoviesGrid} />
<Route path="genre/:title" component={MoviesGrid}/>
</Route>
</Route>
虽然这可能会混淆你的路线。您可能希望将整个内容组件从路由中取出，并使App使用子项进行渲染。