Fatal编程技术网

React-materialui纯javascript

javascript reactjs material-ui

React-materialui纯javascript,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,我正试图让材料UI在纯javascript中工作，没有巴别塔、模块、jsx或诸如此类的东西 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Bridge Bridge.React.Examples</title> &

我正试图让材料UI在纯javascript中工作，没有巴别塔、模块、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>
我有这个错误。你能帮忙吗

未定义“按钮”

即使导入材质ui框架，也需要指明按钮组件的位置

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

您将在这里的

中找到一个完整的示例，即使您导入了material ui框架，也需要指出按钮组件的位置

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

您将在更新中找到完整的示例 对于最初编写此答案的v3，窗口变量为“material ui”。在v4中，这被更改为“MaterialUI”。答案已相应更新

因为在示例中没有使用JSX，所以不需要babel。您只需要在通过const{Button}=window['MaterialUI']使用按钮之前定义它

Bridge.React.Examples 常数{ 按钮 }=窗口['MaterialUI']； ReactDOM.render React.createElementButton，{variant:'contained'，color:'primary'}，'Hello World'， document.getElementById'main' ; 更新 对于最初编写此答案的v3，窗口变量为“material ui”。在v4中，这被更改为“MaterialUI”。答案已相应更新

因为在示例中没有使用JSX，所以不需要babel。您只需要在通过const{Button}=window['MaterialUI']使用按钮之前定义它

Bridge.React.Examples 常数{ 按钮 }=窗口['MaterialUI']； ReactDOM.render React.createElementButton，{variant:'contained'，color:'primary'}，'Hello World'， document.getElementById'main' ;
看来它管用。非常感谢你。但这是关于巴贝尔的：-@user1576055我在回答之前检查过：它有效！不幸的是，babel是使用JSX的必备工具。另外，请注意：这段代码没有使用JSX，所以babel是不必要的。它似乎可以工作。非常感谢你。但这是关于巴贝尔的：-@user1576055我在回答之前检查过：它有效！不幸的是，babel是使用JSX的必备工具。另外，请注意：这段代码没有使用JSX，因此babel是不必要的。窗口属性上材质UI的属性名称已从材质UI更改为MaterialUI。经过这个小小的改动，这个脚本仍然可以很好地工作。一个小提示：今天我用MaterialUI的最新开发版本测试了这个脚本。窗口属性上材质UI的属性名称已从材质UI更改为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 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>