Ни один компонент не рендерится после импорта библиотеки реагирует на загрузку - PullRequest
Новая
       13

Ни один компонент не рендерится после импорта библиотеки реагирует на загрузку

0 голосов
/ 23 марта 2019

После npm init и установки пакетов реагировать, реагировать, загружать и запускать загрузка я не могу импортировать какой-либо компонент из библиотеки реагирования, так как import Button from 'react-bootstrap/Button'; производит TypeError: Error resolving module specifier: react-bootstrap/Button.

Я избавляюсь от этой ошибки, изменяя путь на import Button from './node_modules/react-bootstrap/Button' - это правильный путь, но когда я пытаюсь отобразить что-нибудь , это не меняет div в целевом .php-файле, там нет Любая ошибка в консоли, поэтому я проиграл. Я использую препроцессор Babel babel-cli@6 babel-preset-react-app@3 для перевода JSX.

Вот предварительно обработанный index.js: 

import Button from 'react-bootstrap/Button'


class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <p>blah blah blah blah blah</p>
      </div>
    );
  }
}

ReactDOM.render(<ProfilePage/>, document.getElementById('app'))

и index.php: 

<!DOCTYPE html>

<html lang="en">


<head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link
   rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
   integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous"
 />

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

</head>


<body>


  <div id="app">inner html
  </div>


  <script
    src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
    crossorigin
  />
  <script>var Alert = ReactBootstrap.Alert;</script>

  <script type="module" src="./index.js"></script> <!-- processed index.js --> 

</body >

Вывод: inner html. Без импорта response-bootstrap он работает отлично, тоже с начальной загрузкой, но, конечно, я не могу использовать компоненты response-bootstrap. Чего мне не хватает?

1 Ответ

0 голосов
/ 23 марта 2019

Я думаю, что ваш синтаксис импорта отключен.Вместо 

import Button from 'react-bootstrap/Button'

Попробуйте 

import { Button } from 'react-bootstrap’

или 

import { Button } from 'react-bootstrap/Button'

, если вышеуказанное не работает.

...