ReactJS: Uncaught ReferenceError: require не определен

Я пытаюсь использовать DRY в React JS. Я пытаюсь использовать один и тот же фрагмент HTML в разных файлах

частичный:

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

Я требую его в другом файле:

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

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

Но я получаю сообщение об ошибке:

Uncaught ReferenceError: require is not defined

эти скрипты включены на страницу html, например: <script type="text/babel" src="scripts/admin.js"></script>

Я использую webpack

ОТВЕТЫ

Ответ 1

Если вы не используете какой-либо модуль, например webpack или т.д. Вы должны назначить компоненты для какого-либо глобального объекта javascript, поскольку объекты из .jsx не помещаются в глобальную область

Итак, вот решение (здесь используется окно)

Определенный модуль:

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

Где вы его используете:

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

Ответ 2

Рассмотрим использование модулей ES6 вместо запроса с React

экспортировать модуль:

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

импортировать модуль:

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

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

Ответ 3

Здесь вы должны прочитать больше о модулях: https://www.sitepoint.com/understanding-es6-modules/

Основные проблемы в вашем существующем коде:

  • Похоже, что вы используете Webpack, вы используете его неправильно. В вашем финальном пакете (окончательный JS файл) он не должен содержать никаких "требуемых" ключевых слов. Вы использовали Babel с вашим веб-пакетом? Пожалуйста, покажите нам свою конфигурацию WebPack.
  • Ваш файл AdminMenu выглядит не как модуль. Файл adminMenu должен содержать ключевое слово "export", после чего вы сможете "потребовать" или "импортировать" его из других файлов.

Кроме того, вы можете писать вопросы в комментариях с русского языка, если вам удобнее

Ответ 4

Вы должны использовать

const { Component } = React;
const { render } = ReactDOM;

на месте

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

Ответ 5

Да, это работает для меня. Благодарю.