18React子元件使用Context來進行通訊

使用官方提供的方式 公共的上下文物件  型別vue中  var  bus = new  vue()       bus.$on     bus.$emit

1:新建了乙個公共的bus.js 寫入如下**

import react from "react";

const context = react.createcontext();
export  default  context;

import  child10 from "./child10";

import  child11  from "./child11";
import  context  from  "./bus";

4:在回到child10中 對num進行獲取和修改

import react,  from 'react'

import context from "./bus";
export default class child10 extends component 
render() 
}>加法)}
}

最後去child11.js中 **如下

import react,  from 'react';

import context  from  "./bus";
export default class child11 extends component }>獲取值)}
}

執行就可以看到效果

React使用children渲染子元件方法

在vue裡,渲染子元件可以使用slot插槽,不僅能指定子元件渲染位置,還能通過指定name屬性來有選擇地渲染,但是在react裡就沒有這種元件了。當然,react也不是沒有辦法實現slot元件的功能,通常就是用 this.props.children 這個屬性 class parent extend...

react父元件呼叫子元件方法

實現父元件呼叫子元件方法 基本思路 父元件可以通過props把自己的函式方法傳遞給子元件呼叫，那麼子元件通過這個函式把自己的元件例項傳回給父元件，父元件只需要儲存這些例項便可以呼叫子元件的方法 父元件import react,from react import from antd import fr...

React父元件呼叫子元件方法

import react,from react export default class parent extends component click click e class child extends component myname alert hello from child compon...