组件通讯

父子组件通讯

父向子传值

1. 父组件 向子组件自定义的属性传递值

   <Child content={this.state.data}></Child>

2. 子组件通过 this.props.自定义的属性 接受数据

   this.props.content

子向父传值

1. 父组件定义一个函数，参数是子组件即将传过来的值，函数体是拿到数据后要做的事，然后把这个函数传给子组件（函数声明需要改变 this 指向）

   <Child trigger={this.handleTrigger}></Child>

   handleTrigger(data) {
       // 拿到 data 后要去做的事情
   }

2. 子组件通过一个事件 调用 父组件传过来的函数，把要传的数据当做参数传进函数中

   <div onClick={this.emitTrigger}>click me</div>

   emitTrigger() {
       this.props.trigger('你好，我是子组件呀！')
   }

总代码

import Child from './child'
const Parent = () => {
	const handleTrigger = (data) {
		console.log(data) // 你好，我是子组件呀！
 	}
 	return ( 
 		<Child content="你好，我是父组件呀！" trigger={this.handleTrigger} />
 	)
}

const Child = ({ content, trigger }) => {
 	const emitTrigger = () => {
		console.log(content) // 你好，我是父组件呀！
     		trigger('你好，我是子组件呀！')
 	}
}
export deafult Child

context

祖先把一些信息传递给子组件

• 传递 / 更换主题
• 传递 / 更换语言

祖先组件

const { Provider, Consumer } = React.createContext("默认内容");
export { Consumer } // 导出给子组件用

const Parent = () => (
    <Provider value='cn'>
        <Child />
    </Provider>
)

子组件

import { Consumer } from './Parent'

const Child = () => (
    <Consumer>
        {value => <div>{ value }</div>}
    </Consumer>
)
export default Child

自定义事件

• 引入 events 包

  npm install evevnts -D

• 新建一个 ev.js，引入 events 包，并向外提供一个事件对象，供通信时使用

  import { EventEmitter } from "events"
  export default new EventEmitter()

• 传递数据的组件，触发自定义事件

  import emitter from "./ev"
  
  /*
  	param1：自定义事件名称
  	param2：传递的信息
  */ 
  emitter.emit("myFn","Hello")

• 收取数据的组件，接受并及时销毁自定义事件

  import emitter from "./ev"
  
  componentDidMount(){
      this.eventEmitter = emitter.addListener("myFn", (msg) => {
          console.log(msg) // Hello
      })
  }
  // 组件销毁前移除事件监听
  componentWillUnmount(){
      emitter.removeListener(this.eventEmitter)
  }

redux