在 Reactjs 中基于条件导入组件（基于条件的导入）答案

【问题标题】：Importing components on conditional bases in Reactjs (Conditional based import)在 Reactjs 中基于条件导入组件（基于条件的导入）
【发布时间】：2018-10-27 03:20:51
【问题描述】：

我真的是新来的反应，现在坚持如何根据条件导入组件，这基本上是通过道具来的。看看我在课堂上的以下渲染代码

render() {

if (this.props.social == 1) {
  const FacebookLogin = require('react-facebook-login-component').FacebookLogin;
  const 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>
)
}

上面的代码在渲染时会报错

GoogleLogin 未定义/FacebookLogin 未定义

请注意，我不想在代码中使用 import。请就如何解决此问题提供您的建议/答案/反馈。

谢谢！

【问题讨论】：

标签： javascript reactjs import

【解决方案1】：

在我看来，当您尝试渲染组件并且 props.social 值不是 1 时，组件将未定义，因为无法找到它们。它们只有在条件通过时才会被创建。

最好还是把它移到类中的另一个方法中，例如

class X extends Component {
  renderLogin() {
    const FacebookLogin = require("react-facebook-login-component")
      .FacebookLogin;
    const GoogleLogin = require("react-google-login");

    return (
      <div className="row social">
        <div className="col">
          <FacebookLogin />
        </div>
        <div className="col">
          <GoogleLogin />
        </div>
      </div>
    );
  }

  render() {
    return <div>{this.props.social == 1 ? this.renderLogin() : ""}</div>;
  }
}

【讨论】：

【解决方案2】：

这是因为构建工具需要知道哪个代码/组件，所以在您的构建代码中添加。在这种情况下，构建工具无法知道您正在导入其他一些组件，但是当您的代码执行时，它会给出错误，因为该组件没有被导入。所以无条件导入组件，有条件使用

【讨论】：

【解决方案3】：

你得到的错误是因为 const 是块范围的。这意味着使用 const 声明的变量仅在您定义它们的大括号内的范围内。对于您的情况，FacebookLogin 和 GoogleLogin 仅在 if 语句中定义。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

我只会导入或需要渲染之外的组件。在这种情况下，它们将在模块级别范围内。您是否有理由需要有条件地要求？如果您担心包大小，可以查看代码拆分（假设您使用的是 webpack）：https://webpack.js.org/guides/code-splitting/。但是，在您发现这是一个实际问题之前，我不会担心这一点。否则这是一种过早优化的形式。

【讨论】：

【解决方案4】：

在这种情况下，我使用 Ayinla 建议的类似方法帮助自己，但在条件基础上使用单独的函数：

class X extends Component {
    renderGoogleLogin() {
        return(
            <div className="col">
                <GoogleLogin />
            </div>
        );
    }
    renderFacebookLogin() {
        return(
            <div className="col">
                <FacebookLogin />
            </div>
        );
    }

    render() {
        const gl  = this.props.social == 1 ? this.renderGoogleLogin() : '';
        const fbl = this.props.social == 1 ? this.renderFacebookLogin() : '';

        return (
            <div className="row social">
                {gl}
                {fbl}
            </div>
        );
    }
}

【讨论】：