尝试使用组件时未定义不是对象错误

Question

我正在尝试使用Portal，但是当我用<PortalProvider>包装我的<App/>时，我得到 Undefined is not an object error，基本上门户允许您在应用程序中移动组件 et 而不必再次重新渲染它。 这是我在应用程序中遇到的错误，但我不知道为什么！！！

错误：类型错误：未定义不是对象（评估 PortalContext>PortalContext>Provider

PortalContext.tsx

import * as React from 'react'
export default PortalContext = React.createContext({
gates: {},
teleport: (gateName: string, element: JSX.Element) => {
return
 }
})

PortalProvider.tsx

import * as React from 'react'
import { PortalContext } from './PortalContext'

interface IProps {
  children: JSX.Element
}

class PortalProvider extends React.Component<IProps> {
  public state = {
    gates: {}
  }

public render() {
const { children } = this.props
return (
  <PortalContext.Provider value={{ gates: this.state.gates, teleport: 
 this.teleport }}>
    {children}
    </PortalContext.Provider>
  )
}

 private teleport = (gateName: string, element: JSX.Element) =>
  this.setState({ gates: { ...this.state.gates, [gateName]: element } 
})
}

   export default PortalProvider

PortalGate.tsx

import * as React from 'react'
import { PortalContext } from './PortalContext'

function PortalGate(props: {
  gateName: string
  children?: (teleport: (gateName: string, element: JSX.Element) => 
void) => JSX.Element
}) {
  const { gateName, children } = props
  return (
    <PortalContext.Consumer>
      {value => {
        return (
          <React.Fragment>
            {value.gates[gateName]}
            {children && children(value.teleport)}
          </React.Fragment>
        )
      }}
    </PortalContext.Consumer>
  )
}

export default PortalGate

应用程序.js

import * as React from 'react'
import PortalProvider from './PortalProvider'
export default class App extends React.Component{

  public render() {
    return (
      <PortalProvider>
        <App/>
      </PortalProvider>
    )
  }
}

Answer 1

发生这种情况是因为您默认导出上下文并将其与命名导入一起使用。

所以，改变这一行：

import { PortalContext } from './PortalContext'

到：

import PortalContext from './PortalContext'

本文供参考。