React组件通信

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>
	}
}

总结

子传父，父传子包含函数方法和类方法，可自行选择使用