Question

import asyncComponent from './asyncComponent'

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

为什么上面的代码无效？ Button组件是普通组件。

我这样做export { ButtonPrimary } from './Buttons'没关系。

Mt asyncComponent代码

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

似乎

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

应该是

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

Answer 2

export { ButtonPrimary } = AsyncButton语法无效，因为export支持here。它不会进行解构，ButtonPrimary也不是AsyncButton属性。

如果ButtonPrimary是Buttons模块导出：

export { ButtonPrimary } from './Buttons';

那应该是：

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

导出更高的组件包装器语法无效？

2 个答案: