экспорт синтаксиса оболочки высшего компонента неверен?

Question

import asyncComponent from './asyncComponent'

const AsyncButton = asyncComponent(() => import('./Buttons'))
    export { ButtonPrimary } = AsyncButton

Почему указанный выше код недействителен?Button компонент - обычный компонент.

Я делаю это export { ButtonPrimary } from './Buttons' все в порядке.

Mt asyncComponent code

import React, { Component } from 'react'

    const asyncComponent = importComponent => {
      class AsyncComponent extends Component {
        state = {
          component: null
        }

        async componentDidMount() {
          const { default: component } = await importComponent()

          this.setState({
            component: component
          })
        }

        render() {
          const C = this.state.component

          return C ? <C {...this.props} /> : null
        }
      }

      return AsyncComponent
    }

    export default asyncComponent

Answer 1

Синтаксис

export { ButtonPrimary } = AsyncButton недопустим, поскольку export поддерживает ограниченный набор вариантов синтаксиса .Он не выполняет деструктуризацию, также свойство ButtonPrimary не AsyncButton.

Если ButtonPrimary равно Buttons экспорт модуля:

export { ButtonPrimary } from './Buttons';

Тогда должно быть:

const AsyncButton = asyncComponent(async () => (await import('./Buttons')).ButtonPrimary);
export { AsyncButton as ButtonPrimary };

Answer 2

Похоже,

const AsyncButton = asyncComponent(() => import('./Buttons'))
export { ButtonPrimary } = AsyncButton

должно быть

export const ButtonPrimary = asyncComponent(() => import('./Buttons'));