React-Router - Показать детали от определенного ID

Question

Im делает простой портфель, используя реактивный маршрутизатор.

У меня есть указатель страницы "/" и работы Page "trabalhos /", которые отображают все мои работы.

Целью является то, что когда я нажимаю кнопку «Показать больше» на странице «Работы», я хочу перейти на одну страницу, на которой отображается только эта работа.

Im используя <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 (Single Work)

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

Подключите свою страницу подробностей к магазину redux и отфильтруйте его с помощью идентификатора.

Ваш 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); 

Другим решением бы добавить onClick событие и передать детали задания через browserHistory.

В 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; 

Надеюсь, это поможет.