javascript - 在Reactjs中根据条件导入组件(Conditional based import)

Question

我对 react 真的很陌生，现在坚持如何根据条件导入组件，这基本上是通过 Prop 来的。看看我的类中的以下渲染代码

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 not defined / FacebookLogin not defined

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

谢谢!

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

`