如何在本地 React 项目中引用 Material UI 组件答案

【问题标题】：How to reference Material UI component in local React project如何在本地 React 项目中引用 Material UI 组件
【发布时间】：2021-01-06 15:18:42
【问题描述】：

我正在尝试设置一个使用 React 和 Material UI 的简单 Flask 应用程序（我不能为此使用 Node/NPM）。 react、react-dom 和 material-ui.js 都由 Flask 在静态资源路径之外提供服务。它们加载得很好，但是在第一个 text/babel 函数中找不到 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,700&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/

【问题讨论】：

标签： reactjs material-ui babeljs

【解决方案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>

【讨论】：

太棒了。是的，您的示例确实允许 materialUI 按钮在具有零 Node.js/NPM 的超级简单 Flask 应用程序中呈现。非常感谢！