通过props传递

共同的数据放在父组件上, 特有的数据放在自己组件内部(state),通过props可以传递一般数据和函数数据, 只能一层一层传递

一般数据-->父组件传递数据给子组件-->子组件读取数据

函数数据-->子组件传递数据给父组件-->子组件调用函数(相当于vue当中的自定义事件)

案例在:react中使用Ajax请求(axios,Fetch)在这篇文章的分别使用axios和fetch实现一个搜索案例中就有

使用消息订阅(subscribe)-发布(publish)机制

PubSubJS可以用在任何关系的组件中,如果传递的参数有多个就封装成对象

工具库: PubSubJS。下载: npm install pubsub-js --save

在需要的组件中引入:import PubSub from 'pubsub-js'

PubSub.subscribe('delete', function(data){ }); //订阅

PubSub.publish('delete', data) //发布消息

还是拿react中使用Ajax请求(axios,Fetch)在这篇文章的分别使用axios和fetch实现一个搜索的案例来修改

父组件中什么都不用做,只负责引入两个子组件search-list和search-input

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

import SearchInput from './search-input/search-input'
import SearchList from './search-list/search-list'
class Search extends Component {
  render() {
    return (
      <div className='search-axios'>
        <div className='search-input-cantain'>
          <SearchInput/>
        </div>
        <div className='search-list-cantain'>
          <SearchList />
        </div>
      </div>
    )
  }
}
export default Search

消息发布写在发送数据的组件中,比如这个案例中发送数据的是search-input这个组件

import React, {Component} from 'react'
import './search-input.css';
import PubSub from 'pubsub-js'

class SearchInput extends Component {
  handleSearch = () => {
    // 获取输入框中的数据
    const searchName = this.searchName.value

    // 使用PubSub发布消息,第一个参数是消息名,第二个参数是这个消息的值
    if (searchName) {
      PubSub.publish('search', searchName)
    }

    // 清空输入框中的数据
    this.searchName.value = ''
  }

  render() {
    return (
      <div className='search-input'>
        <input type='text' ref={input => this.searchName = input} placeholder='enter the name you search'/>
        <button onClick={this.handleSearch}>Search</button>
      </div>
    )
  }
}
export default SearchInput

消息订阅写在接收消息的组件中(search-list),订阅消息写在组件的componentDidMount(初始化已经挂载)周期函数中

import React, {Component} from 'react'
import './search-list.css';
import PubSub from 'pubsub-js'
import axios from 'axios'

class SearchList extends Component {

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

  // 在此方法中启动定时器/绑定监听/发送ajax请求
  async componentDidMount () {
    PubSub.subscribe('search', (msg, searchName) => {
      // 这个回调函数必须有两个参数,第一个是消息名,第二个是订阅的消息的值
      const url = `https://api.github.com/search/users?q=${searchName}`
      this.setState({ initView: false, loading: true })
      axios.get(url)
        .then((response) => {
          this.setState({ loading: false, users: response.data.items })
        })
        .catch((error) => {
          console.log('error', error.response.data.message, error.message)
          this.setState({ loading: false, errorMsg: error.message })
        })
    });
  }

  render() {
    const {initView, loading, users, errorMsg} = this.state

    if (initView) {
      return <div className='search-hide-enter'>enter the name you search</div>
    } else if (loading) {
      return <div className='search-ing'>搜索中,请稍后.....</div>
    } else if (errorMsg) {
      return <div className='search-error'>{errorMsg}</div>
    } else {
      return (
        <div className='search-list'>
          {users.map((user, index) => (
            <div className='search-item' key={index}>
              <div className='search-item-img'><img src={user.avatar_url} alt='user'/></div>
              <p className='search-item-name'>{user.login}</p>
            </div>
          ))}
        </div>
      )
    }
  }
}
export default SearchList

redux

react组件之间的通信的更多相关文章

  1. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  2. react 组件之间的通信

    react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂.解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级 ...

  3. 关于react组件之间的通信

    才开始学react刚好到组件通信这一块,就简单的记录下组件间的通信方式:父到子:props.context,子到父:自定义事件.回调,兄弟组件:共父props传递.自定义事件import React, ...

  4. react native 之子组件和父组件之间的通信

    react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...

  5. React 学习(六) ---- 父子组件之间的通信

    当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...

  6. react组件之间的几种通信情况

    组件之间的几种通信情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1,父组件向子组件传递 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过 ...

  7. react第十七单元(redux和组件之间的通信,react-redux的相关api的用法)

    第十七单元(redux和组件之间的通信,react-redux的相关api的用法) #课程目标 什么是redux-redux react-redux的作用是什么 react-redux如何应用 #知识 ...

  8. React 组件之间通信 All in One

    React 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 props 2. 兄弟组件之间通信 3. 跨多层级的组件之间通信 Context API https://react ...

  9. react 实现组件嵌套以及子组件与父组件之间的通信

    当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件 ...

随机推荐

  1. Leetcode 10. 正则表达式匹配 - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  2. Chapter 4 Invitations——18

    But they were all in, and Edward was speeding away. 但是他们都在里面了之后,Edward就加速走了. I drove home slowly, ca ...

  3. MySQL8.0.12 安装及配置、读写分离,主从复制

    一.安装 1.从网上下载MySQL8.0.12版本,下载地址:https://dev.mysql.com/downloads/mysql/ 2. 下载完成后解压 我解压的路径是:D:\Java\mys ...

  4. 性能测试-Jmeter3.1 使用技巧

    一.JMeter官网 下载地址 http://jmeter.apache.org/download_jmeter.cgi Jmeter wiki https://wiki.apache.org/jme ...

  5. ES6躬行记(19)——生成器

    根据ES6制订的标准自定义迭代器实现起来比较复杂,因此ES6又引入了生成器的概念,生成器(Generator)是一个能直接创建并返回迭代器的特殊函数,可将其赋给可迭代对象的Symbol.iterato ...

  6. 【Node.js】通过mongoose得到模型,不能新添字段的问题

    问题描述 通过node.js为查询到的json对象添加新的字段,对象成功保存到数据库中,但新增字段却没保存. 前几天用vue+node.js+mongodb技术做一个购物车功能的网页,发现node.j ...

  7. C语言之递归

    递归例子如下: #include <stdio.h> /*函数声明*/ void digui(int n); int main() { ; digui(n); ; } void digui ...

  8. Asp.net Core 项目中如何使用 MongoDB 数据库

    内容来源 https://blog.csdn.net/qq_26900081/article/details/83272132 一.添加依赖 1.MongoDB.Driver 2.MongoDB.Bs ...

  9. C#实现窗体全屏

    方法一:设置窗体属性 //程序启动路径,与生成程序的exe文件在同一目录下 public String exePath = Application.StartupPath; //定义窗体宽高 ; ; ...

  10. Mysql 连接数,最大并发数设置

    项目中可能会遇到MySQL: ERROR 1040: Too many connections”的异常情况,造成这种情况的一种原因是访问量过高,MySQL服务器抗不住,这个时候就要考虑增加从服务器分散 ...