React中基于条件导入组件的问题求助（条件式导入）

嘿，我来帮你搞定这个问题！你遇到的GoogleLogin not defined / FacebookLogin not defined错误，核心原因是变量作用域的问题：你把FacebookLogin和GoogleLogin的const声明放在了if语句的块级作用域里，当render函数执行到返回JSX的部分时，这两个变量已经超出了可访问的范围，自然会报错。

下面给你两种不用import语句的修复方案，都是基于调整变量作用域实现的：

方案一：提前声明变量，条件赋值 #

这是最清晰也最推荐的方式，先在整个render函数的作用域里声明变量，再在条件满足时赋值：

render() {
  // 先在render顶部用let声明变量，作用域覆盖整个render函数
  let FacebookLogin, GoogleLogin;
  if (this.props.social === 1) {
    FacebookLogin = require('react-facebook-login-component').FacebookLogin;
    GoogleLogin = require('react-google-login');
  }
  
  return (
    <div>
      {this.props.social === 1 ? (
        <div className="row social">
          <div className="col">
            <FacebookLogin />
          </div>
          <div className="col">
            <GoogleLogin />
          </div>
        </div>
      ) : ""}
    </div>
  )
}

这样调整后，JSX部分就能正常访问到这两个组件变量了。

方案二：在JSX中直接条件导入 #

如果不想额外声明变量，也可以在需要渲染组件的位置直接执行require，但要注意把require的结果作为JSX元素使用：

render() {
  return (
    <div>
      {this.props.social === 1 ? (
        <div className="row social">
          <div className="col">
            {require('react-facebook-login-component').FacebookLogin}
          </div>
          <div className="col">
            {require('react-google-login')}
          </div>
        </div>
      ) : ""}
    </div>
  )
}

不过这种方式每次渲染到该部分时都会执行require，虽然生产环境下打包工具（比如Webpack）会优化重复导入，但方案一的可读性和性能表现会更好一些。

另外小提醒：因为是类组件，每次render都会执行这些逻辑，如果props.social频繁变化，可能会有重复导入的情况，但社交登录组件一般不会频繁切换，所以这个问题不用太担心~

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