React函数式组件 - 父子组件之间的通信

水深无声 2023-07-22 10:27 21阅读 0赞

###### React函数式组件 - 父子组件之间的通信 ######

父传子 --> 属性
    子传父 --> 回调函数callback(属性传过去一个回调函数)

import React, {  useState } from 'react'
    
    const Navbar = (props) => { 
      return (
        <div>
          Navbar-
          {  props.myname }
          { /* 点击Navbar中的按钮，控制Sidebar显示和隐藏 */}
          <button
            onClick={ () => { 
              props.onEvent()
            }}
          >显示/隐藏</button>
        </div>
      )
    }
    
    const Sidebar = () => { 
      return (
        <div>
          Sidebar
          <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
          </ul>
        </div>
      )
    }
    
    const Child = (props) => { 
      return (
        <div>
          Child-
          {  props.children }
        </div>
      )
    }
    
    export default function App() { 
      const [show, setshow] = useState(false)
    
      return (
        <div>
          <Navbar 
            myname="抽屉" 
            onEvent={ () => { 
              console.log('父组件中调用',show)
              setshow(!show)
            }}
          />
    
          { 
            show ?
            <Sidebar /> :
            null
          }
    
          <Child />
        </div>
      )
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 React函数式组件 - 父子组件之间的通信

React函数式组件 - 父子组件之间的通信父传子 --> 属性子传父 --> 回调函数callback(属性传过去一个回调函数) impo

水深无声/ 2023年07月22日 10:27/ 0 赞/ 22 阅读

相关 vue父子兄弟之间的组件通信

vue组件通信的方式父子组件通信 > 父组件：father.vue <template> <div class="father">

￡神魔★判官ぃ/ 2023年01月01日 12:59/ 0 赞/ 238 阅读

相关 react高阶组件之父子组件通信

首先我们知道，父组件向子组件传参：通过props。（注：这个props可以是a、b… ，出于规范，我们写props）第一步：在父组件中定义一个布尔类型变量，通过布尔类

曾经终败给现在/ 2022年12月15日 03:26/ 0 赞/ 165 阅读

相关【前端开发】React 中父子组件之间的通信方式

文章目录一. 父组件传递子组件 1. 子组件是class组件 1. 子组件是function组件二. 子组件传递父组件一.

素颜马尾好姑娘i/ 2022年09月09日 06:08/ 0 赞/ 172 阅读

相关 react 父子组件之间的通信和函数调用

[【react】父组件向子组件传值][react] 父向子是用props，然后再子那边有一个监听函数 componentWillReceive

绝地灬酷狼/ 2022年07月15日 01:50/ 0 赞/ 224 阅读

相关 react 父子组件之间的通信和函数调用

[【react】父组件向子组件传值][react] 父向子是用props，然后再子那边有一个监听函数 componentWillReceive

曾经终败给现在/ 2022年07月15日 01:50/ 0 赞/ 165 阅读

相关 vue非父子组件之间的通信

1、创建一个vm.js文件 --保证通信组件是一个vue对象 ![70][] 2、vm.js的内容 / Created by Adminis

喜欢ヅ旅行/ 2022年05月28日 12:55/ 0 赞/ 274 阅读

相关 vue父子组件之间通信实例

一、父组件向子组件传递数据 ①获取数据并在父组件上绑定数据 ②在子组件使用props接收父组件传递过来数据 ③将接收的数据绑定到子组件模板二、子组件向父组件传递

待我称王封你为后i/ 2022年04月21日 21:06/ 0 赞/ 263 阅读

相关 Vue父子组件之间通信

1.子组件代码 <template> <Editor id="tinymce" :init="editorInit" v-model="message"/

﹏ヽ暗。殇╰゛Y/ 2022年03月22日 03:42/ 0 赞/ 327 阅读

相关 vue父子组件之间的通信

在vue组件通信中其中最常见通信方式就是父子组件之中的通性，而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用

绝地灬酷狼/ 2022年03月06日 02:12/ 0 赞/ 310 阅读