React组件传值（父子、兄弟组件相互传值）

最新推荐文章于 2024-07-29 11:36:43 发布

SmallishJoker

最新推荐文章于 2024-07-29 11:36:43 发布

阅读量832

点赞数

分类专栏：解决方案文章标签： React 组件传值

本文链接：https://blog.csdn.net/SmallishJoker/article/details/103383450

版权

本文介绍了React组件间通信的方法，包括父组件如何通过props向子组件传递数据，子组件如何通过回调函数向父组件传递值，以及如何利用父组件实现兄弟组件之间的状态共享。详细展示了相关代码示例。

摘要由CSDN通过智能技术生成

react 组件传值（方法）

父组件向子组件传值

通过props传参，在子组件的标签中以 attr 属性的方式

父组件 Parent.js

import React from 'react';
import Child from './Child';

export default class Parent extends React.Component {
   

	constructor(props) {
   
		super(props);
		this.state = {
   
			data: 'Parent'
		}
	}

	parentFunction = () => {
   
		console.log('父组件方法')
	}
	
	render() {
   
		return (
			<div>
				<Child data={
    this.state.data } parentFunction={
    this.parentFunction } />