Блог

Главная - Вопросы по программированию - Как ссылаться на компонент пользовательского интерфейса материала в локальном проекте React

Как ссылаться на компонент пользовательского интерфейса материала в локальном проекте React

#reactjs #material-ui #babeljs

#reactjs #материал-пользовательский интерфейс #babeljs

Вопрос:

Я пытаюсь настроить простое приложение Flask, которое использует интерфейс React и Material (я не могу использовать для этого Node / NPM). react, react-dom и material-ui.js все они обслуживаются Flask из пути статических ресурсов. Они загружаются просто отлично, но в самой первой текстовой / вавилонской функции элемент Button не может быть найден. Его там в material-ui.js но моя функция JSX этого не видит. Есть ли способ импортировать компонент из material-ui.js ?

Мой index.html:

 <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <!-- Metas -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

    <title>F.L.O.P.</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700amp;display=swap" />
    <!-- Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons" />


</head>

<body>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <h1>Hello World!!</h1>

    <div id="test"></div>

    <!-- Local React Lib -->
    <script src="static/js/react/react.js"></script>

    <!-- Local React DOM lib-->
    <script src="static/js/react/react-dom.js"></script>

    <!-- Local Material UI Lib -->
    <script src="static/js/material/material-ui.js"></script>

    <!-- Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        function App() {
            return (
                <Button variant="contained" color="primary">
                    Hello World
                </Button>
            );
        }
        ReactDOM.render(<App />, document.querySelector('#test'));
    </script>

</body>

</html>

Это приводит к

 Uncaught ReferenceError: Button is not defined

в консоли из:
Встроенный сценарий Babel: 4
Какой:

 <Button variant="contained" color="primary">

строка.

Пример кнопки здесь: https://material-ui.com/getting-started/usage /

Ответ №1:

Компоненты будут доступны внутри MaterialUI объекта. Для Button компонента, доступ к нему через MaterialUI.Button или деструктурировать его.

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

  <!-- React -->
  <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>

  <!-- Babel -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- MUI -->
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { Button } = MaterialUI;
    
    ReactDOM.render(
      (<Button variant="contained" color="primary">
         Hello
      </Button>), 
      document.getElementById("test") 
    );
  </script>
</body>

Комментарии:

1. Фантастика. Да, ваш пример позволяет отображать кнопку MaterialUI в супер простом приложении Flask с нулевым Node.js / NPM. Большое вам спасибо!