在 React 中使用枚举文件中的属性返回标题未定义答案

【问题标题】：Using property from enum file in React returns titles is not defined在 React 中使用枚举文件中的属性返回标题未定义
【发布时间】：2020-04-04 13:42:27
【问题描述】：

我在 React 中有一个简单的自定义组件，它接受字符串作为属性并显示文本。我正在尝试从位于我的 src 文件夹中的枚举 js 文件中的 const 加载我的文本内容。我在父组件和index.js 中导入文件，但是当我尝试使用它时，我得到'titles' is not defined，如何正确使用文件中的常量？以下是相关代码：

import React from 'react';
import enums from '../../enums.js'
import CustomHeading from '../CustomHeading/CustomHeading.jsx'


class SecondColumn extends React.Component {

  render() {
    return <div className="second-column">

      <div className="second-column__about-me">
        <CustomHeading text={titles.ABOUT_ME} className="second-column__centered-heading" />
        <img className="second-column__first_part__test-img-col" src={require("../../assets/images/fake-image.png")} alt="fake img for now" />
        <div className="second-column_first_part_text-parent">
          <p className="second-column_first_part_text-parent__text-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
          Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id  Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id
          Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id  Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id
          Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id  Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id
           </p>
        </div>
      </div>

      <div className="second-column__first_part">
        <CustomHeading text={'My astrological readings'} className="second-column__centered-heading" />

       </div>
       </div>
  }
};

export default SecondColumn;

这里是enums 文件：

const titles = {
    ABOUT_ME: 'About me'
}

export default titles

我也尝试通过 enums.titles.ABOUT_ME 调用它，但这也不起作用

【问题讨论】：

您没有从enum 文件中导出任何内容？
titles 应该在enums 文件中默认导出。你做到了吗？
我忘记了那一步，我做到了，现在我得到标题没有定义
是的，因为您将其导入为enums 而不是titles，请使用enums.ABOUT_ME 或将其导入为titles

标签： javascript reactjs enums

【解决方案1】：

而不是通过调用它

enums.titles.ABOUT_ME

调用它使用

enums.ABOUT_ME

这应该可行。

【讨论】：

【解决方案2】：

您的enums.js 文件需要默认导出。

const titles = {
    ABOUT_ME: 'About me'
};

export default titles;

此外，您正在不正确地访问枚举对象。将组件中的 titles.ABOUT_ME 更改为 enums.ABOUT_ME。或者将导入的 const 的名称更改为 titles。

导入为titles：

// Replace this line
import enums from '../../enums.js';

// With this line
import titles from '../../enums.js';

【讨论】：