react 调用子（孙）组件方法

react 调用子（孙）组件方法
在不是用redux的情况下，我们要使用子（孙）组件上的方法，或者属性
调用子组件
import React, {Component} from 'react';

export default class Parent extends Component {
render() {
return(
<div>
<Child onRef={this.onRef} />
<button onClick={this.click} >click</button>
</div>
)
}
//定义一个拿子组件返回值this的函数
onRef = (ref) => {
this.child = ref
}
//调用处理函数
click = (e) => {
this.child.myName()
}

}

class Child extends Component {
componentDidMount(){
//通过pros接收父组件传来的方法
this.props.onRef(this)
}

myName = () => alert('子组件fn')

render() {
return ('ch')
}
}

步骤分析
在父组件this上先挂载一个child = ref 接收一个参数 ref 子组件传递过来的this
<Child onRef={this.onRef} /> 在子组件上用props传递这个函数
子组件接收这个函数返回自己的this，如：在生命周期中返回这个this
componentDidMount(){
//通过pros接收父组件传来的方法
this.props.onRef(this)
}

调用孙组件
我们知道了子组件，那孙组件也就自然而然了，其实就是在子组件上在加一层拿子组件返回值this的函数:<Child onRef={this.onRef} />
import React, {Component} from 'react';

}
-----------------------华丽的分割线-------------------------------
class Child extends Component {
componentDidMount(){
   //通过pros接收父组件传来的方法
this.props.onRef(this)
}
   onRef = (ref) => {
this.child = ref
}
childFn = (e) => {
this.child.myName()

}

render() {
<Child2 onRef={this.onRef}>我是孙组件<Child2>
}
}

--------------------华丽的分割线-------------------------------
class Child2 extends Component {
componentDidMount(){
//通过pros接收父组件传来的方法
this.props.onRef(this)
}

myName = () => alert('孙组件fn')

render() {
return ('ch')
}
}

我们可以看到父组件 => 调用子组件的childFn（） => 调用孙组件的myName（）
其实最好真正调用的还是孙组件的函数，只不过是孙组件吧当前的this 传给子组件，子组件再传给父组件

ps：
我们可以看到，在组件中一但跨域比较多的组件，通信起来就比较麻烦，就像以上的那样情况，如果这样的情况多了起来且交叉的数据较多，就会变的特别杂乱，这个时候就推荐使用redux 等状态管理工具来实现，组件中的状态管理

那什么情况下需要用到组件的状态管理呢？

用户的使用方式复杂
不同身份的用户有不同的使用方式（比如普通用户和管理员）
多个用户之间可以协作
与服务器大量交互，或者使用了WebSocket
View要从多个来源获取数据
“如果你不知道是否需要 Redux，那就是不需要它。”

Redux 的创造者 Dan Abramov 又补充了一句。

“只有遇到 React 实在解决不了的问题，你才需要 Redux 。”

react 调用子（孙）组件方法相关推荐

vue父页面调用子页面及方法及传参，鼠标光标定位
项目场景: vue父页面调用子页面及方法问题描述 vue中父界面调用子界面及方法时界面可以调用,但是调用方法的时候第一次报错,但是关掉界面再次重新打开就没问题了原因分析: 在我之前添加鼠标指针定位 ...
Layui父级页面调用子级页面方法
父级页面调用子级页面方法百度了一堆,没几个有用的,为避免以后会用到,在这记下笔记 layer.open({title : "xxxx",type : 2,content : Gl ...
使用parent.layer.open()打开页面如何调用子页面的方法
我的问题: A 页面包含iframeB页面,从iframe B页面使用parent.layer.open 打开一个iframe弹层C页面,我知道这时弹层是在A页面打开的,现在我想在layer打开的i ...
layer.open参数；layer.open关闭事件；layer.open关闭刷新；layer.open获取子页的值；layer.open调用子页面的方法
父页面 function layerOpen(){layer.open({type: 2,shade: [0],title: "验收申请",area: ['1024px', '68 ...
vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
vue怎么调用子元素的方法_vue.js 父组件如何触发子组件中的方法
文章目录组件组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能 ...
vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
子级组件中的实现组件名称:EditTable.vue export default{ name:'ET', ....... methods:{ ShowMore(step){ ...
关于kendo.ui父页面调用子页面的方法问题
话不多说,直接上代码 $("#父页iframe名").data("kendoTabStrip").contentElement(0).children[0].c ...
小程序原生组件调用mpvue父组件方法
通过triggerEvent实现 1.小程序原生子组件 methods: {markertap () {console.log('子组件内部点击')this.triggerEvent('markert ...

react 调用子（孙）组件方法

react 调用子（孙）组件方法相关推荐

最新文章

热门文章