父組件：App組件
子組件：Search組件、List組件

案例需求：文本框中輸入關鍵詞，點擊搜索按鈕后，下方列表展示出搜索結果

實現思路：

子組件Search組件向父組件App傳遞狀態（狀態包括：是否為第一次打開頁面isFirst、是否處于加載中isLoading、搜索出來的列表結果users、請求相關的錯誤信息err）
解決方案：想要實現子向父傳遞狀態，可以采取父向子傳遞一個方法，然后子中通過this.props.updateAppState({狀態名： “狀態值”})的方式來實現

子組件List拿到父組件App中的狀態，通過this.props.狀態名

App組件：

import React, {Component} from 'react' import Search from "./components/Search"; import List from "./components/List"; import './App.css'; export default class App extends Component {state = {// 初始化狀態users: [], // users初始值為數組isFirst: true, // 是否為第一次打開頁面isLoading: false, // 標識是否處于加載中err: '' // 存儲請求相關的錯誤信息}// 更新App的stateupdateAppState = (stateObj) => {this.setState(stateObj)}render() {return (<div className="container"><Search updateAppState={this.updateAppState} /><List {...this.state} /></div>)} }/*function App() {return (<div><Index /></div>); }*/

Search組件：

import React, {Component} from 'react'; import axios from "axios";class Search extends Component {search = () => {// 獲取用戶的輸入(連續解構賦值+重命名)const {keyWordElement: {value: keyword}} = this// 發送請求前通知App更新狀態this.props.updateAppState({isFirst: false, isLoading: true})// console.log(keyword)// 發送網絡請求axios.get(`https://api.github.com/search/users?q=${keyword}`).then((response) => {// console.log('成功了', response.data)// 請求成功后通知App更新狀態this.props.updateAppState({isLoading: false, users: response.data.items})},(error) => {// console.log('失敗了', error)this.props.updateAppState({isLoading: false, err: error.message})})}render() {return (<section className="jumbotron" style={{textAlign: "center"}}><h3 className="jumbotron-heading">搜索github用戶</h3><div><input ref={c => this.keyWordElement = c} type="text" placeholder="輸入關鍵詞點擊搜索"/>&nbsp;<button onClick={this.search}>搜索</button></div></section>);} }export default Search;

List組件：

import React, {Component} from 'react'; import './index.css'class List extends Component {render() {const {users, isFirst, isLoading, err} = this.propsreturn (<div className="row">{isFirst ? <h2>歡迎使用，輸入關鍵字，隨后點擊搜索</h2> :isLoading ? <h2>Loading...</h2> :err ? <h2 style={{color: 'red'}}>{err}</h2> :users.map((userObj) => {return (<div className="card" key={userObj.id}><a href={userObj.html_url} rel="noreferrer" target="_blank"><img alt="avatar" src={userObj.avatar_url} style={{width: '100px'}}/></a><p className="card-text">{userObj.login}</p></div>)})}</div>);} }export default List;

總結

以上是生活随笔為你收集整理的react父子组件通信案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。