父向子传值:
父组件:
import { Component} from "react"
import styles from "./parent.module.css"
import Child from "./child"
export default class Parent extends Component{
constructor(){
super()
this.state={
data:"我是父组件传过来的数据"
}
}
render(){
const {data} = this.state
return(
<div className={styles.parent}>
<div className={styles.title}>
<div>父组件</div>
</div>
<Child data={data}/>
</div>
)
}
}
子组件:
import { Component } from "react"
import styles from "./child.module.css"
export default class Child extends Component{
render(){
const { data } = this.props
return(
<div>
<div className={styles.title}>子组件</div>
<div>{data}</div>
</div>
)
}
}
子向父传值
父组件:
import { Component} from "react"
import styles from "./parent.module.css"
import Child from "./child"
export default class Parent extends Component{
constructor(){
super()
this.state={
data:"父组件传的数据"
}
}
changeData=(e)=>{
this.setState({
data:e
})
}
render(){
const {data} = this.state
return(
<div >
<div className={styles.parent}>
<div className={styles.title}>父组件</div>
<div>{data}</div>
</div>
<Child data={data} changeValue={(e)=>this.changeData(e)}/>
</div>
)
}
}
子组件:
import { Component } from "react"
import styles from "./child.module.css"
import PropTypes from "prop-types"
export default class Child extends Component{
handleChange= () =>{
this.props.changeValue("子组件修改的值")
}
render(){
const { data } = this.props
return(
<div>
<div className={styles.title}>子组件</div>
<div>{data}</div>
<button onClick={()=>this.handleChange()}>修改父组件的数据</button>
</div>
)
}
}
Child.propTypes={
data:PropTypes.string
}
插槽
第一种方式 children实现
父组件:
import { Component} from "react"
import styles from "./parent.module.css"
import Child from "./child"
export default class Parent extends Component{
render(){
return(
<div >
<div className={styles.parent}>
<div className={styles.title}>父组件</div>
</div>
<Child>
<div>插槽左边</div>
<div>插槽中间</div>
<div>插槽右边</div>
</Child>
</div>
)
}
}
子组件:
import { Component } from "react"
import styles from "./child.module.css"
import PropTypes from "prop-types"
export default class Child extends Component{
render(){
const {children} = this.props
return(
<div>
<div className={styles.title}>子组件</div>
<div className={styles.content}>
<div>{children[0]}</div>
<div>{children[1]}</div>
<div>{children[2]}</div>
</div>
</div>
)
}
}
Child.propTypes ={
left: PropTypes.object,
center: PropTypes.object,
right: PropTypes.object,
}
第二种方式 props实现
父组件:
import { Component} from "react"
import styles from "./parent.module.css"
import Child from "./child"
export default class Parent extends Component{
render(){
const left = <div>左边</div>
const center = <div>中间</div>
const right = <div>右边</div>
return(
<div >
<div className={styles.parent}>
<div className={styles.title}>父组件</div>
</div>
<Child left={left} center={center} right={right}></Child>
</div>
)
}
}
子组件:
import { Component } from "react"
import styles from "./child.module.css"
import PropTypes from "prop-types"
export default class Child extends Component{
render(){
const {left,center,right} = this.props
return(
<div>
<div className={styles.title}>子组件</div>
<div className={styles.content}>
<div>{left}</div>
<div>{center}</div>
<div>{right}</div>
</div>
</div>
)
}
}
Child.propTypes ={
left: PropTypes.object,
center: PropTypes.object,
right: PropTypes.object,
}
非父子组件通信
爷孙组件:context实现(类组件和函数式组件)
import React from "react";
export const MyContext = React.createContext()
父组件:
import { Component,createContext} from "react"
import styles from "./parent.module.css"
import Child from "./child"
// export const MyContext = createContext();
import { MyContext } from "./MyContext"
export default class Parent extends Component{
render(){
return(
<div className={styles.parent}>
<div className={styles.title}>
<div>父组件</div>
</div>
<MyContext.Provider value={{data:"爷组件传过来的值"}}>
<Child />
</MyContext.Provider>
</div>
)
}
}
孙组件(类组件)使用Sun.contextType = MyContext
import { Component } from "react"
import { MyContext } from "./MyContext";
import styles from "./sun.module.css"
export default class Sun extends Component{
render(){
console.log(this);
const {data} = this.context
return(
<div>
<div className={styles.title}>孙组件</div>
<div>{data}</div>
</div>
)
}
}
Sun.contextType = MyContext
孙组件(函数组件)使用const value = useContext(MyContext)
import { Component,useContext } from "react"
import { MyContext } from "./MyContext"
import styles from "./sun.module.css"
export default function Sun (){
const value = useContext(MyContext)
return(
<div>
<div className={styles.title}>孙组件</div>
<div>{value.data}</div>
</div>
)
}
兄弟组件:事件总线实现(events)
import { EventEmitter } from "events"
export const eventsBus = new EventEmitter()
子组件1
import { Component } from "react"
import styles from "./child.module.css"
import { eventsBus } from "./events"
export default class Child1 extends Component{
handleEmit(){
eventsBus.emit("send","兄弟传的数据")
}
render(){
return(
<div>
<div className={styles.title}>子1组件</div>
<button onClick={()=>this.handleEmit()}>兄弟之间传递数据</button>
</div>
)
}
}
子组件2
import { Component } from "react"
import styles from "./child.module.css"
import { eventsBus } from "./events"
export default class Child2 extends Component{
constructor(){
super()
this.state={
data:null
}
}
componentDidMount(){
eventsBus.addListener("send",this.handleAcceptData)
}
handleAcceptData=(e)=>{
console.log(e);
this.setState({
data:e
})
}
render(){
const { data } = this.state
return(
<div>
<div className={styles.title}>子2组件</div>
<div>{data}</div>
</div>
)
}
}
https://www.yuque.com/docs/share/ec3f8328-6a16-4ed7-a4aa-2392f338bfd6?# 《组件通信》