26_练习2_用户搜索_初始化显示(静态页面)

佚名 7年前 (2019-04-18) 随笔 948人围观抢沙发百度已收录

项目结构：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

import React, {Component} from 'react'

import Search from './search'
import Main from './main'

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <Search/>
                <Main/>
            </div>
        )
    }
}

app.jsx

import React, {Component} from 'react'

export default class Main extends Component {
    state = {
        initView: true,//搜索之前
        loading: false,//搜索中
        users: null,//搜索成功
        errorMsg: null//搜索失败
    }

    render() {
        const {initView, loading, users, errorMsg} = this.state
        if (initView) {
            return <h2>请输入关键字进行搜索</h2>
        } else if (loading) {
            return <h2>正在请求中......</h2>
        } else if (errorMsg) {
            return <h2>{errorMsg}</h2>
        } else {
            return (
                <div className="row">
                    {                   //箭头两个作用 1.函数 2.返回
                        users.map((user, index) => (
                            <div className="card">
                                <a href={user.url} target="_blank">
                                    <img src={user.avatarUrl}
                                         style={{width: 100}}/>
                                </a>
                                <p className="card-text">{user.name}</p>
                            </div>
                        ))
                    }

                </div>
            )
        }

    }
}

main.jsx

import React, {Component} from 'react'

export default class Search extends Component {
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input type="text" placeholder="enter the name you search"/>
                    <button>Search</button>
                </div>
            </section>
        )
    }
}

search.jsx

.album {
    min-height: 50rem; /* Can be removed; just added for demo purposes */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #f7f7f7;
}

.card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
}

.card > img {
    margin-bottom: .75rem;
    border-radius: 100px;
}

.card-text {
    font-size: 85%;
}

index.css

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
import './index.css';

ReactDOM.render(<App/>, document.getElementById('root'));

index.js