React|【React组件】github搜索案例之父子组件通信 (附源码) react.js|github|javascript|代理模式

文章目录

github搜索案例
- 1??需求
- 2??效果
- 3??分析父子组件如何通信
- 4??目录结构
- 5??代码
- 总结

上篇文章学习了如何通过代理方式实现跨域，这篇文章通过一个案例来运用上篇文章的代理的知识，并且教大家如何通过父子组件传值，从而实现兄弟组件之间通信。

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( {/* 检查App组件以及子组件里的一些代码是否有不合理的地方 */} )

父组件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 ( ={this.updateAppState} /> ); } }

【React|【React组件】github搜索案例之父子组件通信 (附源码)】子组件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 ( ="jumbotron"> 搜索github用户 this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索" /> ) } }

子组件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 ( { isFirst ? 欢迎使用，输入关键字，随后点击搜索 : isLoading ? Loading..... : err ? {err} : users.map((userObj) => { return ( {userObj.login} ) }) } ) } }

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

总结在一个React项目中，组件之间的通信是非常重要的环节。
父组件在展示子组件，可能会传递一些数据给子组件：