2021-6-22 React复习父组件子组件的通信

最新推荐文章于 2024-10-09 17:27:33 发布

原创最新推荐文章于 2024-10-09 17:27:33 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

React博客项目专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了在React中如何通过props实现父组件向子组件传递数据，以及子组件如何通过调用父组件传递的回调函数来反向传递数据。以一个具体的例子展示了`Header`组件如何在用户输入任务后，通过`addTodo`函数将新任务传递给`App`组件。状态提升的概念也被提及，当多个组件共享同一数据时，将数据提升到它们的共同父组件的state中进行管理。此外，还讨论了`defaultChecked`与`check`的区别，并强调了状态管理的原则：状态应与其操作方法位于同一组件内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件向子组件传递数据，通过props
子组件向父组件传递数据：父组件利用props向子组件传递一个函数，子组件接收函数，通过调用函数向父组件传递数据。

APP组件，Header LIst Footer是他的子组件

addTodo = (todoObj)=>{
		//获取原todos
		const {todos} = this.state
		//追加一个todo
		const newTodos = [todoObj,...todos]
		//更新状态
		this.setState({todos:newTodos})
	}

render() {
		const {todos} = this.state
		return (
			<div className="todo-container">
				<div className="todo-wrap">
					<Header addTodo={this.addTodo}/>
					<List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
					<Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
				</div>
			</div>
		)
	}

Header组件：this.props.addTodo(todoObj) 利用该函数向父组件传递数据。

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './index.css'

export default class Header extends Component {

	//对接收的props进行：类型、必要性的限制
	static propTypes = {
		addTodo:PropTypes.func.isRequired
	}

	//键盘事件的回调
	handleKeyUp = (event)=>{
		//解构赋值获取keyCode,target
		const {keyCode,target} = event
		//判断是否是回车按键
		if(keyCode !== 13) return
		//添加的todo名字不能为空
		if(target.value.trim() === ''){
			alert('输入不能为空')
			return
		}
		//准备好一个todo对象
		const todoObj = {id:nanoid(),name:target.value,done:false}
		//将todoObj传递给App
		this.props.addTodo(todoObj)
		//清空输入
		target.value = ''
	}

	render() {
		return (
			<div className="todo-header">
				<input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
			</div>
		)
	}
}

状态提升：某些组件使用一些共同的数据，将这些数据放在他们父组件的state中，官方称此操作为状态提升。

defaultCheched 和check的区别是，defaultChecked只在第一次时起作用，后续不能再更改。

状态在哪里，操作状态的方法就在哪里。