Question

我使用react-router制作一个简单的投资组合。

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

目标是当我单击Works页面上的Show More按钮时，我想转到仅显示该工作的单个页面。

我使用this.startTimer = this.startTimer.bind(this);通过道具将id传递给我的新页面。

现在的目标是展示这项工作的细节。

需要帮助。

由于

routes.js

<Route path="trabalhos/:id" component={TrabalhosShow} />

trabalhos.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_show.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);

reducer_trabalhos

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 Index.js

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'},

    ];

}

谢谢！

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;

希望这有帮助。

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

1 个答案: