react 通信-子传父

父组件中定义一个回调函数，由子组件来调用执行。用this.props.[父组件自定义回调函数名称]()调用

/** @Author: Spring* @LastEditors: Aidam_Bo* @LastEditTime: 2023-01-01 21:00:32*/
import React, { Component } from 'react'
//子传父：父中定义一个回调函数，由子组件来调用执行。用this.props.[父组件自定义回调函数名称]()
//子
class Navbar extends Component{render(){return <div style={{background:"red"}}><button onClick={()=>{console.log('子通知父，让父的isShow取反',this.props.event);this.props.event();//调用父组件传过来的回调函数}}>切换</button><span>Siderbar</span></div>}
}//子
class Siderbar extends Component{render(){return <div style={{background:"yellow",width:"200px"}}><ol><li>7</li><li>7</li><li>7</li><li>7</li><li>7</li><li>7</li><li>7</li></ol></div>}
}//父
export default class App extends Component {//state只有在父组件App中取得到。子组件中访问不到state={isShow:true}render() {return (<div><Navbar event={()=>{console.log("父组件中的自定义事件event不会自己执行");this.setState({isShow:!this.state.isShow})}}></Navbar>{this.state.isShow && <Siderbar></Siderbar>}</div>)}
}

react 通信-子传父相关推荐

react（子传父、父传子）
目录 1. 父传子数组/对象的两种写法 2. 子传父: 3. 生成唯一id的库: 4. 对接收的组件进行验证 1. 父传子数组/对象的两种写法 function App() {const ob ...
前端学习（2233）：react的子传父数据传递
import React from 'react'; import ReactDOM from 'react-dom';import './App.css' class ParentCom exten ...
前端学习（2308）：react之子传父
Home,js import React, {Component} from 'react'; import News from "./News"; class Home exte ...
vue组件通讯：父传子、子传父、事件发射详解
1.组件通讯每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据, 怎么办呢? => 组件通信组件通信的方式有 ...
Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
React组件通信(父传子,子传父) - 前端
父组件向子组件传值(通过props传值) 子组件: class Children extends Component{constructor(props){super(props);}render() ...
React (三) 修改props，React父传子、子传父、this绑定
Props介绍与应用什么是 props 如何使用父传子函数组件类组件默认值子传父修改 props 事件监听 this 绑定直接在 jsx 元素上进行绑定(不推荐) 箭头函数(推荐) 直 ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
自我总结篇之vue的组件通信（父传子子传父非父子）
一:父传子父组件代码如下: <template><div class="father"><child :message='message' :mes ...

react 通信-子传父

react 通信-子传父相关推荐

最新文章

热门文章