组件通信
1. 父传子
父组件在使用子组件的时候,在子组件上添加自定义属性,然后将属性值传递给子组件,子组件使用props接收。
父组件
import React, { Component } from "react";
// 引入子组件
import Son from "./demo/Son";
export default class App extends Component {
state = {
uname: "这是父组件的信息",
};
render() {
return (
<div>
<Son info={this.state.uname} />
</div>
);
}
}
子组件
import React, { Component } from "react";
export default class Son extends Component {
render() {
return (
<div>
Son
<h2>{this.props.info}</h2>
</div>
);
}
}
图式
2. 子传父
子传父就是父组件在使用子组件的时候,将一个函数传递给子组件,子组件触发该函数,修改父组件中的值。
父组件代码
import React, { Component } from "react";
import Son from "./demo/Son";
export default class App extends Component {
state = {
info: "这个是父组件的的info",
};
render() {
return (
<div>
<p>{this.state.info}</p>
<Son
callback={(msg) => {
this.getMsg(msg);
}}
/>
</div>
);
}
getMsg = (msg) => {
this.setState({ info: msg });
};
}
子组件代码
import React, { Component } from "react";
export default class Son extends Component {
state = {
msg: "子组件的信息",
};
render() {
// 将传递过来的函数输出看一下
console.log(this.props.callback);
return (
<div>
Son
<button
onClick={() => {
this.props.callback(this.state.msg);
}}
>
change
</button>
</div>
);
}
}
图式
3. 兄弟组件通信
兄弟组件之间传递数据,可以将Son组件的数据传递给自己的父组件,父组件将数据传递给Son2组件。备注:父组件是 son 和 son2 的父亲。
父组件代码
import React, { Component } from "react";
import Son from "./demo/Son";
import Son2 from "./demo/Son2";
export default class App extends Component {
state = {
msg: "",
};
render() {
return (
<div>
<p>{this.state.msg}</p>
<Son
// 将箭头函数传递给子组件
callback={(msg) => {
this.getMsg(msg);
}}
/>
<Son2 msg={this.state.msg} />
</div>
);
}
getMsg = (msg) => {
// 获取到子组件传递过来的信息,然后设置给状态
this.setState({
msg,
});
};
}
子组件Son代码
import React, { Component } from "react";
export default class Son extends Component {
state = {
info: "我是子组件的信息",
};
render() {
return (
<div>
<button
onClick={() => {
// 父组件接收子组件传过来的箭头函数,然后传参并且执行该函数
this.props.callback(this.state.info);
// 上面这个函数执行之后,会触发父组件中的 this.getMsg(msg) 这个函数
}}
>
子组件的按钮
</button>
</div>
);
}
}
子组件Son2代码
import React, { Component } from "react";
export default class Son2 extends Component {
render() {
return (
<div>
<h2>{this.props.msg}</h2>
</div>
);
}
}
4. 提供者与消费者
提供者与消费者可以用来实现组件的跨级通信,提供者 provider
提供数据,消费者 consumer
使用数据。需要注意的是 provider
有一个固定的属性 value
,consumer
需要使用函数然后返回jsx
的形式,这样设计便于传参。
提供者
import React, { Component } from "react";
import Son from "./demo/Son";
// 创建一个 context 对象
export const { Provider, Consumer } = React.createContext();
export default class App extends Component {
state = {
info: "父组件的信息",
};
render() {
return (
<Provider
// value 是固定的写法
value={{
uname: "这里是父组件传递给子组件的",
info: this.state.info,
changInfo: (info1) => {
this.setState({ info: info1 });
},
}}
>
<div>父组件</div>
<Son />
</Provider>
);
}
}
消费者
import React, { Component } from "react";
// 这里引入的消费者 对象 必须是和 提供者配对的
import { Consumer } from "../App";
export default class Son extends Component {
render() {
return (
<Consumer>
// 这里的value 就是提供者的那个value里面的值
{(value) => (
<div>
子组件 {value.uname}---{value.info}
<button
onClick={() => {
value.changInfo("12312314323454");
}}
>
change
</button>
</div>
)}
</Consumer>
);
}
}
5. refs
父组件代码
import React, { Component } from "react";
import Son from "./demo/Son";
export default class App extends Component {
myrefH2 = React.createRef();
myObjRef = React.createRef();
render() {
return (
<div>
<h2 ref={this.myrefH2}>App</h2>
<button
onClick={() => {
/**
* ref 可以获取绑定的标签元素,然后进行操作
*/
console.log(this.myrefH2.current);
}}
>
ref获取html元素
</button>
<Son ref={this.myObjRef} />
<button
onClick={() => {
/**
* 获取绑定的整个组件对象
*/
console.log(this.myObjRef);
}}
>
ref获取组件对象
</button>
</div>
);
}
}
子组件代码
import React, { Component } from "react";
export default class Son extends Component {
state = {
uname: "SON",
};
render() {
return <div>Son</div>;
}
}
ole.log(this.myObjRef);
}}
>
ref获取组件对象
</button>
</div>
);
}
}
子组件代码
import React, { Component } from "react";
export default class Son extends Component {
state = {
uname: "SON",
};
render() {
return <div>Son</div>;
}
}