zoukankan      html  css  js  c++  java
  • react组件通信方式汇总

    父组件更新组件状态,通过props传递给子组件,子组件得到后进行更新。
    Timer 是倒计时子组件,集成在了OrderPay父组件里,父组件向子组件传订单数据参数order对象。如下代码:

    <Timer order={order} /> //倒计时组件

    在子组件里直接通过props获取父组件传递过来的参数,如下:

    let order = this.props.order;//订单详情

    子组件向父组件通信

    子组件更新组件状态,通过回调函数的方式传递给父组件。
    子组件调用父组件通过props传给它的函数更新父组件state,进而完成子组件向父组件的通讯。

    先看父组件

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    //导入子组件
    import Child from './child.js'; 
    
    class App extends Component {
      constructor(props){
        super(props);
        this.state = {
          msg: '父组件初始msg'
        }
      }
    
      //父组件回调函数,更新state,进而更新父组件。
      callback=(msg)=>{
        // setState方法,修改msg参数,值是由子组件传过来。
        this.setState({msg});
      }
    
      render() {
        return (
          <div className="App">
            <p>子组件传值实验: {this.state.msg}</p>
            <Child callback={this.callback} ></Child>
          </div>
        );
      }
    }
    
    export default App;
    ————————————————
    版权声明:本文为CSDN博主「ebonyzhang」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/xingfuzhijianxia/article/details/86151243

    再看子组件

    import React from "react";
    
    class Child extends React.Component{
        constructor(props){
              super(props);
            this.state={
                msg: '子组件msg传值'
            }
        }
        //通过props调用回调函数传值
        trans=()=>{
            this.props.callback(this.state.msg);
        }
        render(){
            return(
                <div>
                    <button onClick={this.trans}>激发trans事件,传值给父组件</button>
                </div>
            )
        }
    }
    
    export default Child;
    ————————————————
    版权声明:本文为CSDN博主「ebonyzhang」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/xingfuzhijianxia/article/details/86151243

    效果
    父组件初始展示

    子组件更新后展示

    跨级组件间通信
    举个例子react-redux的,也是通过Context提供一个全局态的store。还有用户信息的使用,也可以通过context中传递数据。

    通过props或state传值比较麻烦,context提供了一种组件之间共享数据的方式,可以避免数据在组件树上逐层传递,也就是用Context来实现跨层级的组件数据传递。

    这篇文章写得非常好,看完就能理解context,上手实验更能理解透彻,毕竟最后都要应用起来。
    https://www.jianshu.com/p/eba2b76b290b?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
    ————————————————
    版权声明:本文为CSDN博主「ebonyzhang」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/xingfuzhijianxia/article/details/86151243

  • 相关阅读:
    jQuery EasyUI API 中文文档 可调整尺寸
    jQuery EasyUI API 中文文档 链接按钮(LinkButton)
    jQuery EasyUI API 中文文档 手风琴(Accordion)
    jQuery EasyUI API 中文文档 表单(Form)
    jQuery EasyUI API 中文文档 组合(Combo)
    jQuery EasyUI API 中文文档 布局(Layout)
    jQuery EasyUI API 中文文档 拆分按钮(SplitButton)
    jQuery EasyUI API 中文文档 菜单按钮(MenuButton)
    jQuery EasyUI API 中文文档 搜索框
    jQuery EasyUI API 中文文档 验证框(ValidateBox)
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/11951626.html
Copyright © 2011-2022 走看看