javascript - React-Router - 显示特定 ID 的详细信息

Question

我正在使用react-router制作一个简单的作品集。

我有一个索引页"/"和一个作品页"trabalhos/"，显示我的所有作品。

目标是当我单击作品页面上的“显示更多”按钮时，我想转到仅显示该作品的单个页面。

我正在使用<Route path="trabalhos/:id" component={TrabalhosShow} />通过 props 将 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'},

    ];

}

reducer Index.js

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

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

export default rootReducer;

谢谢!

Answer 1

将您的详细信息页面连接到 redux 存储并通过 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);

另一个解决方案是添加 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;

希望这有帮助。