父子组件通信分为【父组件给子组件传值】、【父组件获取子组件的值】两类。
一.父组件给子组件传值3种方式
1.父组件给子组件传递数据
父组件Parent引入子组件Children，并把title传递给子组件
import React from 'react';
import Children from './Children';
class Parent extends React.Component {
constructor(props){
super(props);
this.state = {
title: '我是父组件title'
}
}
render(){
return (
<div>
<Children title={this.state.title}/>
<div>我是父组件内容</div>
</div>
)
}
}
子组件根据props获取父组件传过来的数据
import React from 'react';
class Children extends React.Component {
constructor(props){
super(props);
}
render(){
return (
<header>
<h2>{this.props.title}</h2>
</header>
)
}
}
2.父组件给子组件传递方法
父组件把clearMsg方法传递给子组件
import React from 'react';
import Children from './Children';
class Parent extends React.Component {
constructor(props){
super(props);
this.state = {
msg: '我是消息'
}
}
clearMsg = () => {
//清空消息
this.setState({ msg: '' });
}
render(){
return (
<div>
<Children clearMsg={this.clearMsg}>
<div>我是父组件内容</div>
<p>{this.state.msg}</p>
</div>
)
}
}
子组件根据props获取父组件传过来的方法clearMsg，并在点击按钮的时候执行了父组件清空msg的方法
import React from 'react';
class Children extends React.Component {
constructor(props){
super(props);
}
render(){
return (
<header>
<button onClick={this.props.clearMsg}>清空父组件msg</button>
</header>
)
}
}
3.父组件给子组件传递整个父组件
父组件把this传递给子组件
import React from 'react';
import Children from './Children';
class Parent extends React.Component {
constructor(props){
super(props);
this.state = {
title: '我是首页',
msg: '我是消息'
}
}
clearMsg = () => {
//清空消息
this.setState({ msg: '' });
}
render(){
return (
<div>
<Children parent={this}>
<div>我是父组件内容</div>
<p>{this.state.msg}</p>
</div>
)
}
}
子组件根据props获取父组件传过来的父组件，并在点击按钮的时候获取了父组件的数据和执行了父组件清空msg的方法
import React from 'react';
class Children extends React.Component {
constructor(props){
super(props);
}
getParent = () => {
//这是父组件
let parent = this.props.parent;
//打印父组件的title值
console.log(parent.state.title);
//执行父组件的方法
parent.clearMsg();
}
render(){
return (
<header>
<button onClick={this.getParent}>获取父组件本身</button>
</header>
)
}
}
二.父组件获取子组件值2种方式
1.子组件自发向父组件传值
父组件方法打印出子组件的msg
import React from 'react';
import Children from './Children';
class Parent extends React.Component {
constructor(props){
super(props);
}
sentMsg = (msg) => {
console.log(msg);//打印出 我是子组件mgs
}
render(){
return (
<div>
<Children sentMsg={this.sentMsg} />
</div>
)
}
}
子组件把msg传递给父组件的方法
import React from 'react';
class Children extends React.Component {
constructor(props){
super(props);
this.state = {
msg: '我是子组件mgs'
}
}
render(){
return (
<header>
<button onClick={() => this.props.sentMsg(this.state.msg)}>给父组件传值</button>
</header>
)
}
}
2.父组件获取整个子组件
父组件根据ref获取整个子组件，并获取到组件的所有数据和方法。
这里注意父组件用了React生命周期中componentDidMount方法，该方法是在页面渲染完成之后执行的方法。
import React from 'react';
import Children from './Children';
class Parent extends React.Component {
constructor(props){
super(props);
}
componentDidMount(){
//这是子组件
let headerComponet = this.refs.headerComponet;
//获取子组件数据
console.log(headerComponet.state.msg); //打印出 我是子组件mgs
//执行子组件方法
headerComponet.showMsg();//打印出 我是子组件mgs
}
render(){
return (
<div>
<Children ref="headerComponet" />
</div>
)
}
}
------------更新start---------------
请注意： this.refs这种方法已被废弃，如果你项目中还这么用，请尽快更改他，最新的用法如下：
参考链接： https://reactjs.org/docs/refs-and-the-dom.html
import React from 'react';
import Children from './Children';
class Parent extends React.Component {
constructor(props){
super(props);
this.children = React.createRef(); //创建ref
}
componentDidMount(){
//这是子组件
let headerComponet = this.children.current; //调用ref
//获取子组件数据
console.log(headerComponet.state.msg); //打印出 我是子组件mgs
//执行子组件方法
headerComponet.showMsg();//打印出 我是子组件mgs
}
render(){
return (
<div>
<Children ref={this.children} />
</div>
)
}
}
------------更新end---------------
子组件把msg传递给父组件的方法
import React from 'react';
class Children extends React.Component {
constructor(props){
super(props);
this.state = {
msg: '我是子组件mgs'
}
}
showMsg = () => {
console.log(this.state.msg);
}
render(){
return (<header></header>)
}
}
tips: 简书上交流可能会看不到消息，如有问题，欢迎进群交流50063010
END---------------
网友评论