reactJS中的属性文件答案

【问题标题】：properties file in reactJSreactJS中的属性文件
【发布时间】：2019-09-19 17:19:14
【问题描述】：

我的 React 应用程序中有一些固定/最终变量。我需要将它们放在属性文件中并从中读取应用程序。由于我是 React 新手，我不知道如何创建属性文件以及需要放置的位置。

其次，我通过this 并没有帮助，因为我无法以除本文所述之外的方式使用定义的属性。

请指导我完成在属性文件中创建变量的过程。如果上述方式合适，那么请提出一种使用这些变量的方法（比如分配给另一个变量，或者在其他地方获取并使用它）。

以下是我尝试过的一些事情：

创建一个js文件并放

export const properties = {
    value: 1
};

然后，尝试通过使用来读取它

var valueInOtherClass = {properties.value}

这给出了一个错误。

【问题讨论】：

你能发布一些代码来展示你的尝试吗？那会很有帮助。
@JakeWorth 我已编辑以包含我尝试过的内容
如何导入properties？ “这给出了错误” -> 错误是什么？

标签： reactjs

【解决方案1】：

你可以这样做：

const properties = {
prop1: value,
porp2: value2,
prop3: value3
}
export default properties;

现在，您可以在任何地方使用这些属性，例如：

import properties from 'yourPath';

并使用数组解构，例如：

const {prop1} = properties;

或任何类似的东西：

const myProperty = properties.prop1;

我所做的通常是在我的项目中创建一个配置文件夹，并以正确的名称放置这些文件并根据需要使用这些变量。

【讨论】：

【解决方案2】：

这不会像你期望的那样使用花括号var valueInOtherClass = {properties.value}，最好的做法是像下面这样分解你的变量，

import properties from './foo/bar/something'
const {value} = properties

您也可以选择使用环境变量，而不是在 https://create-react-app.dev/docs/adding-custom-environment-variables 内使用 process.env 之类的东西，并使用喜欢以下内容：

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}

【讨论】：