добавить реакцию на сайт: как импортировать модуль внешнего узла? - PullRequest
Новая
       1

добавить реакцию на сайт: как импортировать модуль внешнего узла?

0 голосов
/ 20 декабря 2018

из этого ресурса https://reactjs.org/docs/add-react-to-a-website.html Я включил в свой статический веб-сайт базовый компонент 

<body>
  <div id="like_button_container"></div>

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <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>
  <script src="https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>    
</body>    
</html>

like_button.js: 

'use strict';

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

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return (
      <div>
        <button onClick={() => this.setState({ liked: true }) }>
          Like
        </button>
        <Facebook /> ???????????
      </div>
    );
  }
}

let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);

Как использовать в этом компонентевнешний модуль, такой как https://www.npmjs.com/package/react-content-loader?

Я пытался добавить скрипт https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js на html-страницу с указанием импорта в моем компоненте, но у меня ошибка "Uncaught ReferenceError: Facebook не определен«

1 Ответ

0 голосов
/ 20 декабря 2018

Я никогда не пробовал код в Добавить React на сайт в главе документации React.Это было хорошее время, чтобы возиться с этим.

Существует несколько потенциальных проблем с вашим приложенным кодом.Вы не загружаете Babel в ваш index.html.По крайней мере, в вопросе.Таким образом, вы не можете использовать синтаксис jsx в like_button.js.

Во-вторых, вы не можете использовать импорт здесь.Вы должны найти, каково пространство имен пакета.Я вышел из окна объекта, проверил, что это ContentLoader.

Остальное легко, я создал автономный index.html с babel: https://codesandbox.io/s/w27pjmq355

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <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>
    <script
      src="https://unpkg.com/react-content-loader@3.4.1/dist/react-content-loader.min.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      console.log('window', window);
      class App extends React.Component {
        render() {
          return (
            <div>
              <h1>Hello world!</h1>
              <ContentLoader.Facebook />
            </div>
          );
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</html>

Я думаю, вы могли быПопробуйте Реагировать таким образом, но использование Babel не рекомендуется, как это в производстве.Я настоятельно рекомендую установить узел и использовать create-реагировать-приложение.Таким образом, вы можете использовать весь набор инструментов в кратчайшие сроки.

Или событие, создающее новую песочницу React на CodeSandbox.io

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

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

...