reactjs antd代码示例：使用文件方式配置及使用环境变量

Dear 丶 2024-02-17 13:36 10阅读 0赞

以下是一个使用 Ant Design（一个流行的React UI库）和环境变量的ReactJS代码示例。我们将使用.env文件来配置环境变量，并使用`dotenv`库来加载这些环境变量。

首先，确保你已经安装了所有必要的依赖：

npm install antd dotenv

或者

yarn add antd dotenv

创建一个`.env`文件，并在其中添加环境变量。例如：

REACT_APP_API_URL=https://api.example.com/

在React应用程序的入口文件（例如`src/index.js`）中，引入并使用`dotenv`和Ant Design：

import React from 'react';
    import ReactDOM from 'react-dom';
    import dotenv from 'dotenv';
    import {
         Provider } from 'react-redux';
    import {
         createStore } from 'redux';
    import {
         ConfigProvider } from 'antd';
    import 'antd/dist/antd.css';
    import App from './App';
    import rootReducer from './reducers'; // 取决于你的存储结构
    
    dotenv.config();
    
    const store = createStore(rootReducer);
    
    ReactDOM.render(
      <Provider store={
        store}>
        <ConfigProvider :config={
        process.env}>
          <App />
        </ConfigProvider>
      </Provider>,
      document.getElementById('root')
    );

在此示例中，我们首先导入所需的库和组件。然后，我们使用`dotenv.config()`加载`.env`文件中的环境变量。然后，我们创建一个Redux存储并使用`ConfigProvider`从环境变量中获取配置。最后，我们渲染我们的应用。现在，你可以在Ant Design组件中使用环境变量。