React组件通信

组件通信方式

  • props
  • callback
  • context(跨层级)
  • Event 事件
  • ref 传递
  • 状态管理(mobx)等

props 和 callback 方式

1. 父传子
  • 所有参数通过 props 传递,要注意,组件包裹的内容都在 children 中
2. 子传父
  • 子组件传父组件:通过父组件传递的 callback 函数,通知父组件

context 方式

  • 这种方式常用于上下文,用于实现祖代组件向后代组件跨层级传值
context 的模式
  1. 创建 Context: React.createContext()
  2. Provider:提供者,外层提供数据的组件
  3. Consumer:消费者,内层获取数据的组件

你可能感兴趣的:(React,react.js,前端,javascript)