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组件中的config变量时，它给出了一个错误＆＃34; Dir未定义＆＃34;。

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

将Dir组件内的Header导入为 import Dir from './Config/dir.jsx'

Answer 2

我认为您正在使用webpack来构建项目

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

你可以做两件事：

在Dir组件

Header

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

我更喜欢1st的做法。

P.S。您不应该同时使用import和require。

变量是undefine - React JS

2 个答案: