变量未定义 - 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 is not defined"。

这是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

我假设您正在使用 webpack 构建您的项目

webpack 除非使用，否则不会导入文件。在您的情况下，您只是导入 Dir 而不是在任何地方使用。 webpack 出于显而易见的原因将跳过此导入。

您可以做两件事：

在 Header 组件中导入 Dir
将 Dir 作为 prop 传递给 Header 组件。像这样<Header dir={Dir} />。这可以通过 Header 组件内的 this.props.dir 访问。

我更喜欢 1st 的处理方式。

P.S。你不应该一起使用 import 和 require。

Answer 2

在 Header 组件中导入 Dir 作为 import Dir from './Config/dir.jsx'

变量未定义 - React JS

Variable is undefine - React JS

javascript

reactjs

react-jsx