简单易懂的React魔法(27):使用户名可点击：我的做法

我希望借此机会你自己编写了代码，因为这样做真的有助于在头脑中理清思路。无论如何我说过我会写一个方案的。所以在这里：（注意：如果你的写法和我的写法里有很大不同，那还是改用我的写法吧，以便于可以继续遵循本教程。）首先，创建文件User.js，内容如下：

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 (

            
Content for {this.props.match.params.user} to go here.
        
);
    }
}

export default User;

这只是我们Detail组件的缩减版本。为了更加简化，我已经将Ajax调用转移到componentWillMount()。因为我们只在这里请求数据，现在render里面还什么都没有，我们现在就写上。

在这之前我想先配置一下新页面的路由。你应该注意到我在上面的代码里用了this.props.match.params.user两次，那你就该很容易看懂App.js里路由怎么写：
src/pages/App.js

注意：你还得先在头部加上import User from './User';

在开始写User页面之前。我们最后一件事是在Detail组件中做User组件的跳转。首先添加这一行到Detail.js文件的开头。

src/pages/Detail.js

import { Link } from 'react-router-dom'；

你现在可以在三个地方添加组件：renderCommits()，renderForks()和renderPulls()。这是很小的变化，你可以参考一下我的写法：

renderCommits() {
    return this.state.commits.map((commit, index) => {
        const author = commit.author ? commit.author.login : 'Anonymous';

        return (

            {author}:
            {commit.commit.message}.
        
);
    });
}

renderForks() {
    return this.state.forks.map((fork, index) => {
        const owner = fork.owner ? fork.owner.login : 'Anonymous';

        return (

            {owner}: forked to
            {fork.html_url} at {fork.created_at}.
        
);
    });
}

renderPulls() {
    return this.state.pulls.map((pull, index) => {
        const user = pull.user ? pull.user.login : 'Anonymous';

        return (

            {user}:
            {pull.body}.
        
);
    });
}

我们现在有一条路由到我们的新页面，Detail页面有几个链接跳转到User组件，外加一个写了大概的User.js。然后试试接口，看看能不能得到用户数据，给你提供一些灵感。

https://api.github.com/users/rexxara/events

如果你想了解的更深入，你可以给User组件更多的render方法，就像我们在Detail组件里做的一样，这样你就能输出更多信息。但是作为示例，我会尽量保持简单。你可以自己多写点render进去。我将在页面中呈现事件类型（比如PushEvent），仓库名称和创建日期。

我从Detail.js中复制的代码基本上做了全部的工作，实际上剩下的就只有写render()方法，这样User组件就完成了。我决定把这个页面做成一个列表，你可以多搞点花样进去，下面是我的User组件render()方法：

src/pages/User.js

render() {
    return 

        {this.state.events.map((event, index) => {
            const eventType = event.type;
            const repoName = event.repo.name;
            const creationDate = event.created_at;

            return (

                {repoName}: {eventType}
                at {creationDate}.
            
);
        })}
    
;
}

与之前的写forks页面差不多，其实应该将{creationDate}和{eventType}放在一条线上，以避免丢失空格。
就这样了，你现在访问http://localhost:8080 ，选择一个repository，点一下你想看的commit forks 或者 pulls ，然后点击用户名来看看他们的历史纪录。完美。