React复杂案例之SearchBase

最新推荐文章于 2024-06-28 09:25:05 发布

原创最新推荐文章于 2024-06-28 09:25:05 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

React教程系列专栏收录该内容

13 篇文章

订阅专栏

本文通过一个React应用实例展示了如何实现一个简单的GitHub用户搜索功能。该应用包括三个主要组件：index、App 和 Search，以及 Main 组件负责展示搜索结果。文章详细介绍了各组件的功能及交互过程。

1.index

import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/app'

import './index.css'

/*

    1.划分组件
    2.静态组件
    3.交互组件

 */

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

2.app


import React,{Component} from 'react'
import Search from './search'
import Main from './main'

export default class App extends Component{

    /*

        搜索：需要在App中设置一个状态用来进行父子组件信息传递
            搜索组件将搜索结果告知父组件，父组件将信息告诉列表组件去更新发请求

     */

    state = {
        searchName:''
    };

    setSearchName = (searchName)=>{
        this.setState({searchName})
    };

    render(){

        return(
            <div className="container">
                <Search setSearchName={this.setSearchName}/>
                <Main searchName={this.state.searchName}/>
            </div>
        )
    }
}

3.search


import React,{Component} from 'react'
import PropTypes from 'prop-types'

export default class Search extends Component{

    static propTypes = {
        setSearchName:PropTypes.func.isRequired
    };

    search = ()=>{
        //得到输入的数据
        const searchName = this.input.value.trim();
        //搜索
        if(searchName){
            this.props.setSearchName(searchName);
        }
    };

    render(){
        return(
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input ref={inst=>this.input=inst} type="text" placeholder="enter the name you search"/>
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        )
    }
}

4.main


import React,{Component} from 'react'
import PropTypes from 'prop-types'
import Axios from 'axios'

export default class Main extends Component{

    state = {
        initView:true,
        loading:false,
        users:null,
        errorMsg:null
    };

    static propTypes = {
        searchName:PropTypes.string.isRequired
    };

    //组件将要接收新的props
    componentWillReceiveProps(newProps){
        console.log('newProps--->',newProps);
        const {searchName} = newProps;
        //接收到新的搜索字符串此时需要发请求
        //更新状态页面显示loading
        this.setState({
            initView:false,
            loading:true,
        });
        const url = `https://api.github.com/search/users?q=${searchName}`;
        Axios.get(url).then(response=>{
            //得到数据
            const result = response.data;
            console.log("result--->",result);
            //处理数据
            const items = result.items.map(item=>{
                return {
                    name:item.login,
                    url:item.html_url,
                    face:item.avatar_url
                }
            });
            console.log("users--->",items);
            //更新状态为成功
            this.setState({
                loading:false,
                users:items
            })
        }).catch(err=>{
            console.log("err--->",err);
            this.setState({
                loading:false,
                errorMsg:err.message
            })
        })
    }

    render(){

        const style = {
            width: 100
        };

        const {initView,loading,users,errorMsg} = this.state;
        const {searchName} = this.props;

        if(initView){
            return <h2>请输入关键字搜索:{searchName}</h2>
        }else if(loading){
            return <h2>正在请求中...</h2>
        }else if(errorMsg){
            return <h2>{errorMsg}</h2>
        }else {

            return (
                <div className="row">
                    {
                        users.map((user,index)=>(
                            <div className="card" key={index}>
                                <a href={user.url} target="_blank">
                                    <img src={user.face} style={style}/>
                                </a>
                                <p className="card-text">{user.name}</p>
                            </div>
                        ))
                    }
                </div>
            )
        }
    }
}