React JS：如何根据环境变量导出不同的组件？

Question

反应 JS 代码：

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

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 组件 return 是组件而不是元素。要更好地理解这一点，请查看 App 组件在使用 <App /> 调用时执行的操作。它运行是其主体中的代码， return 是一些标记。但是如果你调用 <Result /> 会发生什么？它将运行块中的代码和 return 另一个组件（函数）。所以要解决这个问题，你可以尝试：

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

export default Result;

React JS：如何根据环境变量导出不同的组件？

React JS: How can I export different components based on environment variable?

javascript

reactjs

aws-amplify