React Material-UI纯JavaScript

本文介绍了React Material-UI纯JavaScript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使Material-UI在纯JavaScript中工作(没有babel，模块，jsx等)

I'm trying to make Material-UI work in pure javascript (no babel, modules, jsx or such things)

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

我有此错误.你能帮忙吗?

I have this error. Could you please help?

推荐答案

更新对于v3(最初写此答案时)，窗口变量为'material-ui'.在v4中，此名称已更改为'MaterialUI'.答案已相应更新.

UPDATEFor v3 (when this answer was originally written) the window variable was 'material-ui'. In v4 this was changed to 'MaterialUI'. The answer has been updated accordingly.

由于在示例中未使用JSX，因此不需要babel.您只需先定义 Button ，然后通过 const {Button} = window ['MaterialUI']; .

Since you aren't using JSX in your example, you don't need babel. You just need to define Button before using it via 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>

这篇关于React Material-UI纯JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！