如何让React组件读取appSettings.json中的外部配置值？

一、先修正你的判断函数 #

你写的函数里有个典型错误：用了赋值符号=而非比较符号===，而且逻辑可以大幅简化。

原代码问题点：

export function accessIsGated(value) {
    if (value = "True") { // 这里是赋值操作，不是判断相等
        return true;
    };
    return false;
}

修正后的简化版本：

export function accessIsGated(value) {
    // 用严格相等判断字符串是否为"True"
    return value === "True";
}

二、在React组件中读取appSettings.json的方法 #

方法1：直接导入JSON文件 #

React支持直接将JSON文件作为模块导入，步骤如下：

• 确保appSettings.json放在项目的src目录下（或你能正确引用的路径）
• 在需要的组件中导入并读取配置：

import appSettings from './appSettings.json';
import { accessIsGated } from './你的函数文件路径';

function YourComponent() {
    const systemGatedValue = appSettings.AccessControl.SystemGated;
    const isGated = accessIsGated(systemGatedValue);

    // 后续可根据isGated做逻辑处理，比如渲染不同内容
    return (
        <div>
            {isGated ? <p>系统已启用访问限制</p> : <p>无访问限制</p>}
        </div>
    );
}

export default YourComponent;

方法2：通过环境变量注入（适用于Create React App等脚手架） #

如果你的项目用Create React App搭建，推荐把配置注入环境变量，避免直接暴露配置文件：

1. 在项目根目录创建.env文件，添加配置（变量名必须以REACT_APP_开头）：

REACT_APP_SYSTEM_GATED=True

2. 在组件中读取环境变量：

import { accessIsGated } from './你的函数文件路径';

function YourComponent() {
    const systemGatedValue = process.env.REACT_APP_SYSTEM_GATED;
    const isGated = accessIsGated(systemGatedValue);

    return (
        <div>
            {isGated ? <p>系统已启用访问限制</p> : <p>无访问限制</p>}
        </div>
    );
}

export default YourComponent;

内容的提问来源于stack exchange，提问作者SkyeBoniwell