React Material-UI纯JavaScript [英] React Material-UI pure 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'.答案已相应更新.
UPDATE
For 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
