React Material-UI 纯 javascript

IT技术 javascript reactjs material-ui
2021-05-11 01:33:04

我正在尝试使 Material-UI 在纯 javascript 中工作（没有 babel、module、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个回答

即使你导入了 material-ui 框架，你也需要指明 Button 组件必须在哪里找到。

问题是，我不确定不使用 babel 是否可行。

您将在Material-UI 文档中找到一个完整的示例

更新 对于 v3（最初编写此答案时），窗口变量为'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>

<!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>
其它你可能感兴趣的问题
上一篇使用钩子获取数据 下一篇ID 保存和显示名称 - 带有筹码的材料 ui 多选