Variable ist undefine - React JS

Question

Ich habe diese globale Variable für Config-Werte, die ich in index.js erfordern

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')); 

dies der Inhalt meiner dir.jsx ist

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

Als ich accesssed die config-Variable in meinen header.jsx-Komponenten mit {Dir.css} gibt mir einen Fehler "Dir ist nicht definiert".

Hier ist der 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; 

Hier ist der Screenshot:

Answer 1

Ich nehme an, Sie webpack verwenden Ihr Projekt

webpack won‘zu bauen t Importieren Sie Dateien, sofern sie nicht verwendet werden. In Ihrem Fall importieren Sie nur Dir und verwenden nirgendwo. webpack wird diesen Import aus offensichtlichen Gründen überspringen.

Es gibt zwei Dinge, die Sie tun können:

1. Import Dir innerhalb der Header Komponente
2. Übergeben Sie die Dir als prop zum Header Komponente. So <Header dir={Dir} />. Dies kann durch this.props.dir innerhalb der Header Komponente erreicht werden.

Ich bevorzuge die 1st Art zu tun.

P.S. Sie sollten import und require nicht zusammen verwenden.

Answer 2

Import Dir innerhalb der Header Komponente als import Dir from './Config/dir.jsx'