反応の経路に基づいてコンポーネントにデータをロード

Question

私は今、Reactを学習し始めました。私は、初心者が直面する共通の問題に直面していると感じています。私は現時点で本当にシンプルなReact Appを構築しています。私は、ナビゲーションと、クリックされたナビゲーション項目に応じて変化するいくつかの動的コンテンツを含むウェブサイトを構築することを目指しています。ただし、コンテンツは常に同じレイアウトになっているため、変更する必要があるのはコンテンツコンポーネントに表示されるデータのみです。

私は実際のバージョンを構築することができましたが、コンテンツコンポーネントの更新に失敗したため間違っていました。代わりに、2つの異なるファイル（data.jsとdata2.js）からデータをロードする新しいコンポーネント（List.jsとList2.js）をすべてのページに対して作成しました。私は今どのように1つのコンポーネント（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 

あなたの助けを

ありがとう！

Answer 1

あなたは（コードテストしていない）でルータに反応して、パラメータを追加することができます。

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

次に、Listコンポーネントに、ルータが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> 

Hereされますこれに関するドキュメンテーション。