React :如何基于环境变量导出不同的组件？

Question

响应JS代码：

我希望src/app.jsx在.env中的REACT_APP_AUTH_SERVER变量不存在或没有其他值时执行export default withAuthenticator(App)，当.env中的REACT_APP_AUTH_SERVER变量存在并具有值aws-cognito时执行export default withAuthenticator(App)操作。

src/app.jsx

import React, { Component } from 'react';
import SecuredGate from './SecuredGate/SecuredGate';
import { withAuthenticator } from '@aws-amplify/ui-react'
import './App.css';
import '../fontStyles.css';

class App extends Component {
  render() {
    return (
      <div>
        <SecuredGate />
      </div>
    );
  }
}

const Result = () => {
  if (process.env.REACT_APP_AUTH_SERVER && process.env.REACT_APP_AUTH_SERVER === "aws-cognito"){
    return withAuthenticator(App);
  } 
  return App;
}


// export default App;
// export default withAuthenticator(App)

export default Result;

然而，这是行不通的。

如果我这样做了：

export default App;
// export default withAuthenticator(App)

它起作用了，如果我做到了：

// export default App;
export default withAuthenticator(App)

它也能用。

那我错过了什么？

Answer 1

我认为问题在于Result组件返回一个组件而不是一个元素。要更好地理解这一点，请查看App组件在使用<App />调用时所做的工作。它运行其正文中的代码并返回一些标记。但是如果你打电话给<Result />会发生什么。它将在其块中运行代码并返回另一个组件(函数)。因此，要解决这个问题，您可以尝试：

const Result = (process.env.REACT_APP_AUTH_SERVER && process.env.REACT_APP_AUTH_SERVER === "aws-cognito")
    ? withAuthenticator(App)
    : App;
}

export default Result;