我希望借此機(jī)會你自己編寫了代碼，因?yàn)檫@樣做真的有助于在頭腦中理清思路炕吸。無論如何我說過我會寫一個方案的幔睬。所以在這里：（注意：如果你的寫法和我的寫法里有很大不同，那還是改用我的寫法吧览闰，以便于可以繼續(xù)遵循本教程。）首先巷折，創(chuàng)建文件User.js压鉴，內(nèi)容如下：
src/pages/User.js
import React from 'react';
import ajax from 'superagent';
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
events: []
};
}
componentWillMount() {
ajax.get(`https://api.github.com/users/${this.props.match.params.user}/events`)
.end((error, response) => {
if (!error && response) {
this.setState({ events: response.body });
} else {
console.log(`Error fetching user data.`, error);
}
}
);
}
render() {
return (<div>
<p>Content for {this.props.match.params.user} to go here.</p>
</div>);
}
}
export default User;
這只是我們Detail組件的縮減版本。為了更加簡化锻拘，我已經(jīng)將Ajax調(diào)用轉(zhuǎn)移到componentWillMount()油吭。因?yàn)槲覀冎辉谶@里請求數(shù)據(jù)，現(xiàn)在render里面還什么都沒有署拟，我們現(xiàn)在就寫上婉宰。
在這之前我想先配置一下新頁面的路由。你應(yīng)該注意到我在上面的代碼里用了this.props.match.params.user兩次推穷，那你就該很容易看懂App.js里路由怎么寫：
src/pages/App.js
<Route path="/user/:user" component={ User } />
注意：你還得先在頭部加上import User from './User';
在開始寫User頁面之前芍阎。我們最后一件事是在Detail組件中做User組件的跳轉(zhuǎn)。首先添加這一行到Detail.js文件的開頭缨恒。
src/pages/Detail.js
import { Link } from 'react-router-dom'谴咸；
你現(xiàn)在可以在三個地方添加<Link>組件：renderCommits()轮听，renderForks()和renderPulls()。這是很小的變化岭佳，你可以參考一下我的寫法：
renderCommits() {
return this.state.commits.map((commit, index) => {
const author = commit.author ? commit.author.login : 'Anonymous';
return (<p key={index}>
<Link to={ `/user/${author}` }>{author}</Link>:
<a href={commit.html_url}>{commit.commit.message}</a>.
</p>);
});
}
renderForks() {
return this.state.forks.map((fork, index) => {
const owner = fork.owner ? fork.owner.login : 'Anonymous';
return (<p key={index}>
<Link to={ `/user/${owner}` }>{owner}</Link>: forked to
<a href={fork.html_url}>{fork.html_url}</a> at {fork.created_at}.
</p>);
});
}
renderPulls() {
return this.state.pulls.map((pull, index) => {
const user = pull.user ? pull.user.login : 'Anonymous';
return (<p key={index}>
<Link to={ `/user/${user}` }>{user}</Link>:
<a href={pull.html_url}>{pull.body}</a>.
</p>);
});
}
我們現(xiàn)在有一條路由到我們的新頁面血巍，Detail頁面有幾個鏈接跳轉(zhuǎn)到User組件，外加一個寫了大概的User.js珊随。然后試試接口述寡，看看能不能得到用戶數(shù)據(jù)，給你提供一些靈感叶洞。
https://api.github.com/users/rexxara/events
如果你想了解的更深入鲫凶，你可以給User組件更多的render方法，就像我們在Detail組件里做的一樣衩辟，這樣你就能輸出更多信息螟炫。但是作為示例，我會盡量保持簡單艺晴。你可以自己多寫點(diǎn)render進(jìn)去昼钻。我將在頁面中呈現(xiàn)事件類型（比如PushEvent），倉庫名稱和創(chuàng)建日期封寞。
我從Detail.js中復(fù)制的代碼基本上做了全部的工作然评，實(shí)際上剩下的就只有寫render()方法，這樣User組件就完成了狈究。我決定把這個頁面做成一個列表碗淌，你可以多搞點(diǎn)花樣進(jìn)去，下面是我的User組件render()方法：
src/pages/User.js
render() {
return <ul>
{this.state.events.map((event, index) => {
const eventType = event.type;
const repoName = event.repo.name;
const creationDate = event.created_at;
return (<li key={index}>
<strong>{repoName}</strong>: {eventType}
at {creationDate}.
</li>);
})}
</ul>;
}
與之前的寫forks頁面差不多抖锥，其實(shí)應(yīng)該將{creationDate}和{eventType}放在一條線上亿眠，以避免丟失空格。
就這樣了宁改，你現(xiàn)在訪問http://localhost:8080 ，選擇一個repository魂莫，點(diǎn)一下你想看的commit forks 或者 pulls 还蹲，然后點(diǎn)擊用戶名來看看他們的歷史紀(jì)錄。完美耙考。
