Оператор импорта выдает синтаксическую ошибку: «Невозможно использовать оператор импорта вне модуля» - PullRequest
Новая
       1

Оператор импорта выдает синтаксическую ошибку: «Невозможно использовать оператор импорта вне модуля»

0 голосов
/ 26 мая 2020
• 1000 TypeError: не удается прочитать свойство createElement из undefined

Пожалуйста, как я могу решить эту проблему? неверен ли оператор импорта? 

import React, { Fragment } from 'react';
console.log("Testing");
var document;//made this declaration because I got a document undefined error
 document.createElement("p"):
const p = document.createElement("p")

p.innerHTML = "This is to test the javascript";
const body = document.querySelector("body");

body.insertBefore(p,body.childNode[-1]);
<!DOCTYPE html>
<html>
<head>
  <title>Testing vs code</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  
</head>

<body>
  <h1>Testing the vscode html preview package</h1>
  <h2>Hello</h2>
  <script type="module" src="js-prac.js"></script>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 26 мая 2020

Я понимаю, что вы хотите создать простое приложение с помощью React. Я бы порекомендовал вам сначала прочитать это https://kentcdodds.com/blog/how-to-react, а затем этот: https://reactjs.org/tutorial/tutorial.html

Приложение для реагирования может быть создано путем импорта скрипта, как вы начали , но это не рекомендуемый способ создания приложения для реагирования.

После того, как вы go прочтете вышеуказанный пост, найдите хорошее руководство по вашему выбору на платформах по вашему выбору, будь то блог или видео. Я могу назвать несколько таких, как udemy, frontend masters, множественное число и многие другие.

0 голосов
/ 26 мая 2020

Взгляните на ReactJS веб-сайт .

Вы должны создать приложение React, используя диспетчер пакетов узлов npx create-react-app appName

или должен связать скрипты реакции с вашим html

<script src="https://unpkg.com/react@16/umd/react.development.js"></script> 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Также вы не можете переопределить объект документа. Это ссылается на вашу веб-страницу, и вы можете получить доступ к элементу или DOM (объектной модели документа) с помощью объекта документа.

0 голосов
/ 26 мая 2020

Согласно https://reactjs.org/docs/add-react-to-a-website.html, вам нужно добавить эти две строки в ваш HTML файл перед импортом вашего скрипта: 

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

Я не уверен, что загрузка модуля будет работать так, как вы предполагаете, без использования чего-то вроде Create React App. Вы можете удалить операторы импорта и по-прежнему ссылаться на React и ReactDOM в своем скрипте.

например, 

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked comment number ' + this.props.commentID;
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
  .forEach(domContainer => {
    // Read the comment ID from a data-* attribute.
    const commentID = parseInt(domContainer.dataset.commentid, 10);
    ReactDOM.render(
      e(LikeButton, { commentID: commentID }),
      domContainer
    );
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...