Не в состоянии импортировать бутстрап с реактивом с бабелом - PullRequest
0 голосов
/ 28 октября 2019

Я не могу импортировать начальную загрузку с реагированием с использованием babel со следующим кодом. Я использовал следующий CDN для достижения результатов.

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'/>
    <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" />
</head>
<body>
    <div id='root'></div>
    <script type='text/babel'>
    class App extends React.Component{    
        render(){
            return (   
                <div>
                    <div class="jumbotron">
                    <h1 class="display-4">Amazing React, Bootstrap and Webpack</h1>
                    <p class="lead">Created with love</p>
                    <hr class="my-4"/>
                    <p>It uses utility classes for typography and spacing to space content out
                    within the larger container.</p>
                    <p class="lead">
                    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                    </p>
                    </div>
                </div>
            );
          }
        } 
        ReactDOM.render(
          <App />,
          document.getElementById('root')
        );

    </script>
</body>
</html>

Я получаю следующую ошибку. Я хочу использовать responsejs только в одной части моего проекта. Кто-нибудь может помочь, как решить эту проблему.

react-bootstrap.min.js:39 Uncaught TypeError: l.a.createContext is not a function
at Module.<anonymous> (react-bootstrap.min.js:39)
at n (react-bootstrap.min.js:1)
at react-bootstrap.min.js:1
at react-bootstrap.min.js:1
at react-bootstrap.min.js:1
at react-bootstrap.min.js:2

Ответы [ 2 ]

1 голос
/ 28 октября 2019

Это работает хорошо. Просто поменял скрипты и все для соответствующих версий.

<!DOCTYPE html>
<html lang="en">
  <head>
    <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"
    />
  </head>
  <body>
    <h1>App</h1>
    <div id="root"></div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

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

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

  <script type="text/babel">
    class App extends React.Component {
      render() {
        return (
          <div>
            <div className="jumbotron">
              <h1 className="display-4">
                Amazing React, Bootstrap and Webpack
              </h1>
              <p className="lead">Created with love</p>
              <hr className="my-4" />
              <p>
                It uses utility classes for typography and spacing to space
                content out within the larger container.
              </p>
              <p className="lead">
                <a className="btn btn-primary btn-lg" href="#" role="button">
                  Learn more
                </a>
              </p>
            </div>
          </div>
        );
      }
    }

    ReactDOM.render(<App />, document.getElementById("root"));
  </script>
</html>
0 голосов
/ 28 октября 2019

Вам нужен React и React-Dom версии 16.X вместо 15.X , потому что он больше не поддерживается.

Здесь вы можете найтита же проблема решена.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...