React-Router - 從特定ID顯示詳細信息

Question

Im使用react-router製作簡單的產品組合。

我有一個索引頁「/」和工作正常「trabalhos /」是顯示所有我的作品。

目的是當我點擊工作頁面上的顯示更多按鈕時，我想轉到只顯示該工作的單個頁面。

即時通訊使用<Route path="trabalhos/:id" component={TrabalhosShow} />通過道具id傳遞到我的新頁面。

現在的目標是顯示該作品的細節。

需要幫助。

感謝

routes.js

import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 

import App from './components/app'; 
import Index from './components/index'; 
import Trabalhos from './containers/trabalhos'; 
import TrabalhosShow from './containers/trabalhos_show'; 

export default (
<Route path="/" component={App}> 
    <IndexRoute component={Index} /> 
    <Route path="trabalhos" component={Trabalhos}/> 
    <Route path="trabalhos/:id" component={TrabalhosShow} /> 
</Route> 
); 

trabalhos.js（作品的名單）

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Link, browserHistory } from 'react-router'; 


class Trabalhos extends Component { 
     handleClick(trabalho){ 
      browserHistory.push({ 
       pathname: "trabalhos/" + trabalho.id, 
       state: {trabalhoDetails: trabalho} 
      }); 
    } 

    renderList(){ 

     return this.props.trabalhos.map((trabalho) => { 
      return(

       <li key={trabalho.id}>     
         <img src={trabalho.img} /> 
         <p className="trabalho_titulo">{trabalho.title}</p> 
         <p className="trabalho_desc">{trabalho.descricao}</p> 
         <span className="trabalho_saber_mais" onCLick={this.handleClick.bind(this, trabalho)}>Saber Mais</span> 
       </li> 

      ); 
     }); 
    } 


    render(){ 

     return (

      <div> 
       <div className="trabalhos"> 
        <div className="trabalhos_caixa"> 
         <div className="row"> 
          <div className="col-xs-12"> 
           <ul className="no_pad"> 
            {this.renderList()} 
           </ul> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

     ); 
    } 
} 


function mapStateToProps(state){ 

    return { 

     trabalhos: state.trabalho 

    }; 
} 



export default connect(mapStateToProps)(Trabalhos); 

trabalhos_show.js（單一的工作）

個

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

class TrabalhosShow extends Component { 


    render(){ 

     let jobDetails = this.props.location.state.trabalhoDetails 

     let title = jobDetails.title; 

     let desctription = jobDetails.descricao; 

     return (

       <div> 
        <img src={jobDetails.img} /> 
        <p className="trabalho_titulo">{title}</p> 
        <p className="trabalho_desc">{descricao}</p> 
       </div> 
      ); 
    } 

} 

function mapStateToProps(state){ 
    return { 
     trabalhos: state.trabalho 
    }; 
} 

export default connect(mapStateToProps)(TrabalhosShow); 

reducer_trabalhos

export default function() { 

    return [ 

     { id: 1, title: 'Miristica', tec: "Wordpress-Woocommerce", descricao: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", img: 'http://feiraalternativa.pt/wp-content/uploads/2016/04/Miristica-Bio-Cosm%C3%A9tica.png'}, 
     { id: 2, title: 'Teste', tec: "Wordpress-Woocommerce", descricao: "Lorem ipsum dolor sit amet", img: 'https://pbs.twimg.com/profile_images/766360293953802240/kt0hiSmv.jpg'}, 

    ]; 

} 

減速Index.js

import { combineReducers } from 'redux'; 
import TrabalhoPortofolio from './reducer_trabalhos'; 

const rootReducer = combineReducers({ 
    trabalho: TrabalhoPortofolio 
}); 

export default rootReducer; 

謝謝！

Answer 1

將您的詳細信息頁面連接到REDEX存儲並通過ID進行過濾。

你trabalhos_show.js應該如下：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

class TrabalhosShow extends Component { 


    render(){ 
     let jobDetails = this.props.trabalhos.filter(t => t.id == this.props.params.id)[0]; 
     return (
       <div> 
        <img src={jobDetails.img} /> 
        <p className="trabalho_titulo">{jobDetails.title}</p> 
        <p className="trabalho_desc">{jobDetails.descricao}</p> 
       </div> 
      ); 
    } 

} 

function mapStateToProps(state){ 
    return { 
     trabalhos: state.trabalho 
    }; 
} 

export default connect(mapStateToProps)(TrabalhosShow); 

另一種解決方案將通過browserHistory添加onClick事件，並通過工作細節。

在trabalhos。JS，你應該改變你的鏈接：

<span className="trabalho_saber_mais" onCLick={this.handleClick.bind(this, trabalho)}>Saber Mais</span> 

它應該是這樣的：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Link, browserHistory } from 'react-router'; 


class Trabalhos extends Component { 
     handleClick(trabalho){ 
      browserHistory.push({ 
       pathname: "trabalhos/" + trabalho.id, 
       state: {trabalhoDetails: trabalho} 
      }); 
    } 

    renderList(){ 

     return this.props.trabalhos.map((trabalho) => { 
      return(

       <li key={trabalho.id}>     
         <img src={trabalho.img} /> 
         <p className="trabalho_titulo">{trabalho.title}</p> 
         <p className="trabalho_desc">{trabalho.descricao}</p> 
         <span className="trabalho_saber_mais" onClick={this.handleClick.bind(this, trabalho)}>Saber Mais</span> 
       </li> 

      ); 
     }); 
    } 


    render(){ 

     return (

      <div> 
       <div className="trabalhos"> 
        <div className="trabalhos_caixa"> 
         <div className="row"> 
          <div className="col-xs-12"> 
           <ul className="no_pad"> 
            {this.renderList()} 
           </ul> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

     ); 
    } 
} 


function mapStateToProps(state){ 

    return { 

     trabalhos: state.trabalho 

    }; 
} 



export default connect(mapStateToProps)(Trabalhos); 

然後在trabalhos_show.js你可以使用你browserHistory方式通狀態：

let jobDetails = this.props.location.state.trabalhoDetails 

然後你可以得到你所有的trabalho像內部：

let title = jobDetails.title; 
let desctription = jobDetails.descricao; 

希望這會有所幫助。