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

水深无声 2023-07-22 10:27 62阅读 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 条评论，62人围观）

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

相关阅读

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

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

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

相关 React类式组件非父子组件之间的通信

React非父子之间的通信方法： 1.状态提升 -- 中间人模式(通过父组件来通信，一级一级的分发) 2.发布订阅者模式 -- 不需要借助任何人的力量，纯

旧城等待，/ 2023年07月22日 09:21/ 0 赞/ 41 阅读

相关 React教程：父子组件传值（组件通信）

1、父组件传值子组件在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。父组件向子组件传值，通过`props

墨蓝/ 2023年07月08日 12:27/ 0 赞/ 34 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 Vue父子组件之间通信

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

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

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

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

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