javascript - 反应导出多个方法调用另一个方法错误

Question

目前我只导出一个这样的功能，效果很好

import React from "react";
import SocialLogin from "from somewwhere";

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

    );
  }
}
export default SocialLogin(GoogleButton);

但是当我尝试导出多个函数时，它不起作用。

    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>
    
        );
      }
    }

    export {
        SocialLogin(GoogleButton),
        SocialLogin(FacebookButton);
    }

谁能告诉我为什么它不起作用？当我这样做时它会起作用

export {
 SomeFunc,
 AnotherFun,
}

但是如果我把它放在一个functin里面有什么问题呢？谁能告诉我我该怎么做？

标签： javascriptreactjs

Answer 1

您只需执行此操作即可。

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

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

或者你可以这样做。

.... Existing components 

export default {
        SocialLoginGoogle: SocialLogin(GoogleButton),
        SocialLoginFacebook: SocialLogin(FacebookButton)
   } 

下面的工作因为它正在考虑对象key并且value具有相同的名称。因此，速记。

export {
 SomeFunc,
 AnotherFun,
}