React组件之间的通信
一、父组件传递给子组件
1.Props
Props 是目前为止最常用的方式,用于在组件之间传递信息。用 props 可以把数据从父组件传递到它的子组件中。
父组件:
// class类写法
import Children from '../Children'
export default class Father extends Component {
state = {
msg:"我在父,要去子",
}
render() {
return (
<div>
<h1>父组件</h1>
<Children zidingyi={this.state.msg} />
</div>
)
}
}
// 函数写法
import Children from '../Children'
export default function Father () {
let [arr,setarr] = useState('我在父,要去子');
return (
<div className='firther'>
<h1>父组件</h1>
<Children msg={arr} />
</div>
)
}
子文件:
// class类写法
export default class Children extends Component {
render() {
let {zidingyi} = this.props;
return (
<div>
<h1>子组件</h1>
<h1>{zidingyi}</h1>
</div>
)
}
}
// 函数写法
export default (props) => {
return (
<div>
<h1>子组件</h1>
<h1>{props.msg}</h1>
</div>
)
}
二、子传父
1.回调函数
在父组件中定义回调函数,加在子组件的属性上,子组件调用该方法给父组件传递数据。
类方法:
父组件
import React from "react";
import Child from "./child";
export default class Parent extends React.PureComponent{
constructor(props){
super(props);
this.state = { msg: "Parent Msg" };
}
changeMsg = (msg) => {
this.setState({ msg });
}
render() {
return (
<div>
<Child changeMsg={this.changeMsg} msg={this.state.msg}/>
</div>
)
}
}
子组件
import React from "react";
export default class Child extends React.PureComponent{
render() {
return (
<div>
<div>接收父组件的值: {this.props.msg}</div>
<button onClick={() => this.props.changeMsg("改变")}>修改父组件的值</button>
</div>
)
}
}
函数方法:
父组件:
import React from "react";
import Child from "./child";
export default function Father(){
const [name,setName] = useState('张三');
const changeName = (name) => {
setName(name)
}
return (
<div>
<h2>{name}</h2>
<Child msg='i am your father' changeName={changeName} /}
</div>
)
}
子组件:
import React from "react";
export default function(){
return (
<div>
<h1>子组件</h1>
<button onClick={()=>{changeName('李四')}}>点击修改父亲名字</button>
</div>
)
}
不相关组件,兄弟组件传递
Context
app
import React from 'react'
import Son from './son'
import context from './context'
import {Provider} from './context'
export default class App extends React.Component{
state = {
name: 'lisa'
}
render(){
return(
<Provider value={this.state.name}>
<div>
<Son />
</div>
<Provider/>
)
}
}
context
import React from 'react'
const context = React.createContext('defaultValue')
export default context // 引入到App里面
export default const [Provider,Consumer] = context
son
import React from 'react'
import Grandson from './grandson'
import {Consumer} from './context'
export default class Son extends React.Component {
render(){
return (
<Consumer>
{
(context) =>{
return <div>
my name is son :{context}
<Grandson />
</div>
}
}
</Consumer>
)
}
}
// 导入App里面
grandson
import React from 'react'
export default class Grandson extends React.Component {
render(){
return <div>my name is grandson</div>
}
}
总结
子传父,父传子包含函数方法和类方法,可自行选择使用