ReactJS: Uncaught ReferenceError: require non è definito

Question

Sto provando a utilizzare DRY in React JS. Sto cercando di utilizzare lo stesso codice HTML parziale in diversi file

parziali:

var AdminMenu = React.createClass({ 
getInitialState: function() { 
    return {}; 
}, 
render: function() { 
    return (
    <h1>Menu</h1> 
    ); 
} 
}); 

sto requeiring in un altro file:

require('./scripts/adminMenu.js'); 

ReactDOM.render(
<AdminMenu/>, 
document.getElementById('content') 
); 

Ma io sto ottenendo un errore:

Uncaught ReferenceError: require is not defined 

questo script sono inclusi nella pagina HTML come: <script type="text/babel" src="scripts/admin.js"></script>

sto usando webpack

Answer 1

Se non si utilizza alcun bundler modulo come webpack o ecc Si dovrebbe assegnerà i componenti in una certa globale javascript oggetto, poiché gli oggetti da .jsx non sono messi in ambito globale

Quindi, ecco la soluzione (utilizzata finestra oggetto qui)

modulo definito:

window.AdminMenu = React.createClass({ 
    getInitialState: function() { 
    return {}; 
    }, 
    render: function() { 
    return (
     <h1>Menu</h1> 
    ); 
    } 
}); 

Dove lo si utilizza:

ReactDOM.render(
    <window.AdminMenu/>, 
    document.getElementById('content') 
); 

Answer 2

prendere in considerazione di utilizzare i moduli ES6 invece di richiedere con React

esportazione di un modulo:

// src/hello.js 
// export as default 
export default const hello = ({name}) => (
    <h1>Hello {name}</h1> 
) 

importare un modulo:

// src/index.js 
// import from relative directory (src) 
import Hello from './hello' 

const App =() => { 
    return (
    <div> 
     <Hello name="Pavel" /> 
    </div> 
) 
} 

Answer 3

Dovresti leggere di più sui moduli per esempio qui: https://www.sitepoint.com/understanding-es6-modules/

I principali problemi nel codice esistente sono:

1. Sembra, a dispetto di che si sta utilizzando Webpack, lo si utilizza modo sbagliato. Nel bundle finale (file JS finale), non dovrebbe contenere alcuna parola chiave 'require'. Hai usato Babel con il tuo web pack? Per favore, mostraci la tua configurazione di WebPack.
2. Il tuo file AdminMenu non assomiglia al modulo. Il tuo file adminMenu dovrebbe contenere la parola chiave 'export', dopodiché sarai in grado di 'richiederlo' o 'importarlo' da altri file.

Inoltre, è possibile scrivere domande nei commenti con il russo, se è più conveniente per te