reactjs - 如何在本地 React 项目中引用 Material UI 组件
问题描述
我正在尝试设置一个使用 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
在控制台中来自: Inline Babel script:4 这是:
<Button variant="contained" color="primary">
线。
解决方案
组件将在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>
推荐阅读
- java - 使用来自目标/测试类的类
- rest - WebAPI 的 SSL 证书
- c++ - 带有openmp并行的Qimage setPixel不起作用
- python-3.x - 如何制作 python selenium webdriver 类型文本并在另一个名称元素上填充一个名称元素
- python - 当方法访问实例变量时减少语法错误?
- javascript - 在 Redux 将 Redux State 映射到 Props 后设置组件状态
- javascript - 将脚本与媒体查询结合起来
- sas - 是否提供 sas 程序源代码
- r - r - 匹配两个数据帧并在条件下将行从一个插入另一个
- c - 当我使用动态分配时,所有值都相同