Question

我真的很反应，现在仍然坚持如何根据条件导入组件，这些条件基本上都是通过道具来实现的。在我的课程中查看我的以下渲染代码

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。请提供您的建议/答案/反馈，了解如何解决此问题。

谢谢！

Answer 1

这是因为构建工具需要知道在构建代码中添加哪些代码/组件。在这种情况下，构建工具无法知道您正在导入其他组件，但是当您的代码执行时，它会产生错误，因为该组件未导入。因此无条件地导入组件并有条件地使用

Answer 2

在我看来，当你尝试渲染组件并且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>;
  }
}

`

Answer 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/。但是，在您发现这是一个实际问题之前，我不会担心这一点。否则这是一种过早优化的形式。

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

在Reactjs中导入条件基础上的组件（基于条件的导入）

4 个答案: