根据路由中的反应将数据加载到组件中

我刚刚开始学习React,我觉得我面临着大多数初学者将面临的共同问题。 我正在构build一个非常简单的React应用程序。 我打算build立一个网站,导航和一些dynamic的内容,根据点击导航项目而变化。 但是,内容始终具有相同的布局,因此唯一需要更改的部分是显示在内容组件中的数据。

我设法build立一个工作版本,但它感觉不对,因为它没有更新内容组件。 相反,我为每个页面创build了一个从两个不同文件(data.js和data2.js)加载数据的新组件(List.js和List2.js)。 我现在想知道如何才能使用一个组件(list.js),并始终根据导航中单击的类别更新其内容。 这是我现在的代码:

App.js

import React, { Component } from 'react' import List from '../components/List' import Nav from '../components/Nav' import data from '../src/data/data' require ('../src/sass/App.scss'); class App extends Component { render () { return ( <div className="wrapper"> <Nav /> {this.props.children} </div> ) } } export default App 

routes.js

 import React from 'react' import { Route, IndexRoute } from 'react-router' import App from '../components/App'; import List from '../components/List'; import List2 from '../components/List2'; import IndexPage from '../components/IndexPage'; const routes = ( <Route path="/" component={App}> <IndexRoute component={IndexPage} /> <Route path="/list1" component={List} /> <Route path="/list2" component={List2}/> </Route> ); export default routes; 

List.js

 import React, { Component } from 'react' import Article from './Article' require ('../src/sass/List.scss'); import data from '../src/data/data' class List extends Component { render() { const listWebsites = data.map(websites => { return ( <Article key={websites.id} name={websites.name} preview={websites.description} image={websites.image} /> ) }) console.log('our data is:', this.props.data) return ( <div className="wrapperList"> {listWebsites} </div> ) } } export default List 

List2.js

 import React, { Component } from 'react' import Article from './Article' require ('../src/sass/List.scss'); import data from '../src/data/data2' class List extends Component { render() { const listWebsites = data.map(websites => { return ( <Article key={websites.id} name={websites.name} preview={websites.description} image={websites.image} /> ) }) console.log('our data is:', this.props.data) return ( <div className="wrapperList"> {listWebsites} </div> ) } } export default List 

Nav.js

 import React, { Component } from 'react' import { Link } from 'react-router'; import data from '../src/data/data' require ('../src/sass/Nav.scss'); class Nav extends Component { render () { return ( <div> <nav> <ul> <li><Link to="/list1" activeClassName="active">List1</Link></li> <li><Link to="/list2" activeClassName="active">List2</Link></li> </ul> </nav> </div> ) } } export default Nav 

data.js(data2.js结构相同)

 const data = [ { 'id': '1', 'name': 'Website1', 'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ', 'image': 'website1.png', }, { 'id': '2', 'name': 'Website2', 'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ', 'image': 'webstie2.jpg', }, { 'id': '3', 'name': 'website3', 'description': 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr ', 'image': 'website3.jpg', } export default data 

谢谢你的帮助!

您可以在React Router中添加一个参数(代码未经testing):

 const routes = ( <Route path="/" component={App}> <IndexRoute component={IndexPage} /> <Route path="/list1/:data" component={List} /> </Route> ); 

然后,在List组件上,React Router将参数添加到params属性中:

 import React, { Component } from 'react' import Article from './Article' require ('../src/sass/List.scss'); class List extends Component { render() { //We could do this elswere depending on the requirements and //how the data will be loaded (maybe use componentDidMount and the state) var data=[]; if(this.props.params.data==="data1"){ //Load data1 to data ... data=.... }else{ //Load other data ... data=.... } const listWebsites = data.map(websites => { return ( <Article key={websites.id} name={websites.name} preview={websites.description} image={websites.image} /> ) }) console.log('our data is:', this.props.data) return ( <div className="wrapperList"> {listWebsites} </div> ) } } export default List 

最后你使用它:

  <li><Link to="/list/data1" activeClassName="active">List1</Link></li> <li><Link to="/list/data2" activeClassName="active">List2</Link></li> 

这里是关于这个文件。