Javascript 反应路由器-显示特定ID的详细信息

我做了一个简单的投资组合，使用反应路由器

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

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

我使用

通过道具将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>
);

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

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

    ];

}

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

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

export default rootReducer;

reducer Index.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>
);

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

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

    ];

}

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

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

export default rootReducer;

---

谢谢大家!

将详细信息页面连接到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);

应该是这样的：

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

然后你就可以得到trabalho里面所有的东西，比如：

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

---

希望这有帮助。

在您的

trabalhos_show

中，再次获取状态，然后过滤idSo您有什么问题？获取用户id？您好，我想显示我单击的特定工作的详细信息，如果我单击工作1，我想查看该工作，依此类推。我如何将信息传递到我的trabalhos_show.js（单个工作）？Boky，它工作了，非常感谢您的帮助，第一个解决方案工作得很好，但第二个解决方案给了我“无法读取null（…）的属性'trabalhoDetails'”谢谢You@Hseleiro很高兴我能帮忙。如果你点击Saber Mais，它是否会进入详细页面？不，它不会进入详细页面，我通过put trabalhos/1进入详细页面，我得到错误：“无法读取null（…）的属性'trabalhoDetails'”是的，我会更新我的trabalhos_show.js，让你看看我是否做得好。工作：D！！非常感谢你！！真的很感激