React Material-UI чистый JavaScript - PullRequest
Новая
       6

React Material-UI чистый JavaScript

0 голосов
/ 11 февраля 2019

Я пытаюсь заставить Material-UI работать в чистом javascript (без babel, модулей, jsx или подобных вещей) 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8" />
      <title>Bridge Bridge.React.Examples</title>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <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 crossorigin src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
   </head>
   <body>
      <div id="main"></div>
      <script>
         ReactDOM.render(
          React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
          document.getElementById('main')
         );
      </script>
   </body>
</html>

У меня есть эта ошибка.Не могли бы вы помочь?

«Кнопка» не определена

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Даже если вы импортируете framework-материал-пользовательский интерфейс, вам нужно указать, где должен быть найден компонент Button.

Проблема в том, что я не уверен, что это возможно без использования babel.

Полный пример вы найдете здесь в документе Material-UI

0 голосов
/ 11 февраля 2019

ОБНОВЛЕНИЕ Для версии 3 (когда этот ответ был изначально написан) переменная окна была 'material-ui'.В v4 это было изменено на 'MaterialUI'.Ответ был соответствующим образом обновлен.

Поскольку вы не используете JSX в своем примере, вам не нужен babel.Вам просто нужно определить Button перед использованием через const {Button} = window['MaterialUI'];. 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bridge Bridge.React.Examples</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <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 crossorigin src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
</script>
</head>
<body>
<div id="main"></div>
<script>
    const {
        Button
    } = window['MaterialUI'];

    ReactDOM.render(
        React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
        document.getElementById('main')
    );
</script>
</body>
</html>
0 голосов
/ 11 февраля 2019 
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bridge Bridge.React.Examples</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <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 crossorigin src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="main"></div>
<script type="text/babel">
    const {
        Button
    } = window['material-ui']

    ReactDOM.render(
        React.createElement(Button, {variant: 'contained', color: 'primary'}, 'Hello World'),
        document.getElementById('main')
    );
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...