📦github搜索案例

1??需求

上方的输入框输入关键词，点击搜索按钮，下方展示关键词对应的github用户

点击头像可以跳转到该用户github的主页

2??效果

在这里插入图片描述

3??分析父子组件如何通信

使用create-react-app脚手架搭建的项目，拆分组件：最外层App父组件，里面分别为Search和List子组件。

Search组件用来根据用户输入的信息发送网络请求，获取用户数据，要想使获取到的数据及时渲染到页面（即List组件），就要将Search组件获取到的数据传递给List组件，即兄弟组件之间传值，但是由于兄弟组件之间没法进行通信（下篇文章中会讲到兄弟组件之间如何通信），就需要先将Search子组件的数据通过props传给App父组件，然后App父组件将数据通过props传给List子组件，利用父子组件通信，实现了兄弟组件之间的通信。

在这里插入图片描述

4??目录结构

在这里插入图片描述

5??代码

index.js：

// 引入react核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom/client'
// 引入App
import App from './App'

// 创建虚拟DOM
const root = ReactDOM.createRoot(document.getElementById('root'))
// 渲染虚拟DOM到页面
root.render(
  <React.StrictMode>
  {/* 检查App组件以及子组件里的一些代码是否有不合理的地方 */}
  <App />
  </React.StrictMode>
)

父组件App.jsx：

import React, { Component } from 'react';
import Search from './components/Search'
import List from './components/List';

export default class App extends Component {
  state = { //初始化状态
    users: [], //users初始值为数组
    isFirst: true, //是否为第一次打开页面
    isLoading: false, //标识是否处于加载中
    err: '' //存储请求相关的错误信息
  }

  // search组件获取到的数据先传给父组件App，父组件再传给List组件
  // 更新App的state
  updateAppState = (stateObj) => {
    this.setState(stateObj)
  }

  render() {
    return (
      <div className="container">
      <Search updateAppState={this.updateAppState} />
<List {...this.state} />
</div>
);
}
}

子组件Search_index.jsx：

import React, { Component } from 'react'
import axios from 'axios'

export default class Search extends Component {
  search = () => {
    // 获取用户的输入(解构赋值的连续写法+重命名)
    const { keyWordElement: { value: keyWord } } = this
    // 发送请求前通知App更新状态
    this.props.updateAppState({ isFirst: false, isLoading: true })
    // 发送网络请求  
    // 站在3000端口给3000发请求，可以省略http://localhost:3000
    axios.get(`/api1/search/users?q=${keyWord}`).then(
      response => {
        // 请求成功后通知App更新状态
        this.props.updateAppState({ isLoading: false, users: response.data.items })
      },
      error => {
        // 请求失败后通知App更新状态
        this.props.updateAppState({ isLoading: false, err: error.message })
      }
    )
  }

  render() {
    return (
      <section className="jumbotron">
      <h3 className="jumbotron-heading">搜索github用户</h3>
      <div>
      <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索" />&nbsp;
  <button onClick={this.search}>搜索</button>
</div>
</section>
)
}
}

子组件List_index.jsx：

import React, { Component } from 'react'
import './index.css'

export default class List extends Component {
  render() {
    const { users, isFirst, isLoading, err } = this.props
    return (
      <div className="row">
        {
          isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
            isLoading ? <h2>Loading.....</h2> :
              err ? <h2 style={{ color: 'red' }}>{err}</h2> :
                users.map((userObj) => {
                  return (
                    <div key={userObj.id} className="card">
                      <a rel="noreferrer" href={userObj.html_url} target="_blank">
                        <img alt="avatar" src={userObj.avatar_url} style={{ width: '100px' }} />
                      </a>
                      <p className="card-text">{userObj.login}</p>
                    </div>
                  )
                })
        }
      </div>
    )
  }
}

setupProxy.js：

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api1', {
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: { '^/api1': '' }
    })
  )
}

List_index.css：

.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%;
}