javascript - 变量未定义 - React JS

Question

我在index.js 中有一个用于配置值的全局变量

import React from 'react';
import ReactDOM from 'react-dom';

// Config
const Dir = require('./Config/dir.jsx');

// Components
import Header from './Components/Header.jsx';

ReactDOM.render(<Header />, document.getElementById('app'));

这是我的 dir.jsx 的内容

module.exports = {
    css: 'public/css/',
    js: 'public/js/',
    img: 'public/img/'
}

当我使用 { Dir.css } 访问 header.jsx 组件中的配置变量时，出现错误“Dir 未定义”。

这是 header.jsx:

import React from 'react';

require('./../Stylesheets/header.scss');

class Header extends React.Component {
    render() {
        return (
            <div>
                <nav className="navbar navbar-default">
                    <div className="container-fluid">
                        <div className="navbar-header">
                            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span className="sr-only">Toggle navigation</span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                            </button>
                        <a className="navbar-brand" href="#">{ Dir.img }</a>
                        </div>
                        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul className="nav navbar-nav">
                                <li className="active"><a href="#">Link <span className="sr-only">(current)</span></a></li>
                                <li><a href="#">Link</a></li>
                            </ul>
                            <ul className="nav navbar-nav navbar-right">
                                <li><a href="#">Link</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        );
    }
}

export default Header;

这是屏幕截图:

Answer 1

在 Header 组件中导入 Dir 作为从“./Config/dir.jsx”导入目录