React导出多个经SocialLogin包装的组件时报错，该如何解决？

错误原因 #

• ES6 模块的 export {} 命名导出语法只支持传入已定义的标识符（变量/函数/类名等），不支持直接传入表达式，你代码中 SocialLogin(GoogleButton) 是函数调用表达式，不符合语法规范。
• 你写的导出块末尾多了非法的分号，也会触发语法报错。

正确实现方式 #

方式1：先定义包装后组件的变量，再统一导出 #

import React from "react";
import SocialLogin from "from somewhere";

class GoogleButton extends React.Component {
  render() {
    const { fontClass, triggerLogin, ...props } = this.props;
    return (
        <div className="">
           Google
        </div>
    );
  }
}

class FacebookButton extends React.Component {
  render() {
    const { fontClass, triggerLogin, ...props } = this.props;
    return (
        <div className="">
           Facebook
        </div>
    );
  }
}

// 先把包装后的组件赋值给变量
const WrappedGoogleButton = SocialLogin(GoogleButton);
const WrappedFacebookButton = SocialLogin(FacebookButton);

// 再统一导出变量
export {
  WrappedGoogleButton,
  WrappedFacebookButton
}

方式2：定义时直接导出 #

import React from "react";
import SocialLogin from "from somewhere";

export const GoogleButton = SocialLogin(class extends React.Component {
  render() {
    const { fontClass, triggerLogin, ...props } = this.props;
    return (
        <div className="">
           Google
        </div>
    );
  }
})

export const FacebookButton = SocialLogin(class extends React.Component {
  render() {
    const { fontClass, triggerLogin, ...props } = this.props;
    return (
        <div className="">
           Facebook
        </div>
    );
  }
})

导入时使用命名导入语法即可：

import { WrappedGoogleButton, WrappedFacebookButton } from './你的组件文件路径'

内容的提问来源于stack exchange，提问作者user16718966