前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React 开发 | 父子组件间通信

React 开发 | 父子组件间通信

作者头像
白墨石
发布2022-11-21 08:33:46
1.2K0
发布2022-11-21 08:33:46
举报
文章被收录于专栏:生信情报站

文章目录

一、省流

父组件 -> 子组件:通过 props 传递 子组件 -> 父组件:通过 props 传递,但是父组件需要提取给子组件传递一个预定义的函数

二、父传子例子

父组件 父组件将定义好的数据直接用直接通过 props 传递

代码语言:javascript
复制
import React, { Component } from "react";
import List from "./component/List";

export default class App extends Component {
  // 初始化状态
  state = {
    todos: [
      { id: "1", name: "吃饭", done: true },
      { id: "2", name: "睡觉", done: true },
    ],
  };

  render() {
    const {todos} = this.state
    // 直接通过 props 传递
    return (
        <div>
          <List todos={todos}/>
        </div>
    );
  }
}

子组件 子组件通过 this.props 接收数据

代码语言:javascript
复制
import React, { Component } from 'react'

export default class index extends Component {

  render() {
    const {todos} = this.props
    return (
      <div >
      <h1>待办清单</h1>
        {
          todos.map((todo)=>{
            return <h3>todo.name</h3>
          })
        }
      </div>
    )
  }
}

三、子传父例子

父组件 为了接收来自子组件的数据,需要预定义一个函数,将函数通过 props 传递给子组件

代码语言:javascript
复制
import React, { Component } from "react";
import List from "./component/List";

export default class App extends Component {
  // 初始化状态
  state = {
    todos: [
      { id: "1", name: "吃饭", done: true },
      { id: "2", name: "睡觉", done: true },
    ],
  };

  // 添加一个 todo 对象,用于子组件向父组件传递参数
  addTodo = (todoObj) => {
    const todos = this.state.todos;
    const newTodos = [todoObj, ...todos];
    this.setState({ todos: newTodos });
  };

  render() {
    const {todos} = this.state
    // 通过函数传递给子组件
    return (
       <List todos={todos} addTodo={this.addTodo}/>
    );
  }
}

子组件 子组件接收到来自父组件的函数,通过调用函数实现数据传递

代码语言:javascript
复制
import React, { Component } from 'react'

export default class index extends Component {

  handleKeyUp = (event) => {
    const {keyCode, target} = event;
    if(keyCode !== 13) return
    if(target.value.trim() === ""){
      alert("输入不能为空")
      return
    }
    
    const todoObj = {id: nanoid(), name: target.value, done: false}
    // 在子组件中,调用父组件函数,传递参数给父组件
    this.props.addTodo(todoObj)
    target.value = ''
  }

  render() {
    const {todos} = this.props
    return (
      <div >
      <input onKeyUp={this.handleKeyUp} type="text" placeholder='请输入待办事项'/>
      <h1>待办清单</h1>
        {
          todos.map((todo)=>{
            return <h3>todo.name</h3>
          })
        }
      </div>
    )
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-11-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、省流
  • 二、父传子例子
  • 三、子传父例子
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档