umijs+react——Outlet传递context，实现父子组件传值及事件触发

我的版本

"@umijs/max": "^4.0.88"

"ahooks": "^3.7.8",

 

1.父组件

import { Button } from 'antd'
import { Outlet } from '@umijs/max'
import useEventEmitter from 'ahooks/lib/useEventEmitter'

export default function CurrentRiskDevicePage() {
  const event$ = useEventEmitter()
  const eventParams$ = useEventEmitter<{ num: number } | void>()

  return (
    <>
      <Button
        onClick={() => {
          event$.emit()
        }}
      >
        测试
      </Button>
      <Button
        onClick={() => {
          eventParams$.emit({ num: 9 })
        }}
      >
        测试携带参数
      </Button>
      <Outlet context={{ event$, eventParams$ }} />
    </>
  )
}

 

2.子组件

import { useOutletContext } from '@umijs/max'
import { EventEmitter } from 'ahooks/lib/useEventEmitter'

interface ContextType {
  event$: EventEmitter<void>
  eventParams$: EventEmitter<{ num: number } | void>
}

export default function ChildComponent() {
  const { event$, eventParams$ } = useOutletContext<ContextType>() || {}

  event$.useSubscription(() => {
    console.log('触发')
  })

  eventParams$.useSubscription(e => {
    if (e) {
      console.log('携带参数触发', e.num)
    }
  })

  return <></>
}

 

遇到的问题

useOutletContext()返回undefined（注意：useOutletContext是umi4+的钩子函数）

原因：

在route中配置了wrappers，包装器组件拦截了上下文传递。React 上下文特性：上下文只能向下传递一层

解决方法：

修改包装器组件

// wrappers/index.tsx
import { useOutletContext, Outlet  } from '@umijs/max'

export default function Auth() {
  // 获取父级传递的上下文
  const parentContext = useOutletContext()

  // 关键步骤：将上下文继续向下传递
  return <Outlet context={parentContext} />
}