Material-ui React 组件不起作用
Posted
技术标签:
【中文标题】Material-ui React 组件不起作用【英文标题】：Material-ui React components not working 【发布时间】：2016-12-26 14:18:15 【问题描述】：我正在尝试使用http://www.material-ui.com/ 进行前端设计。我正在尝试执行入门教程中的第一个示例。我有以下 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="App.js"></script>
<script type="text/javascript" src="MyAwesomeReactComponent.js"></script>
</body>
</html>
并遵循 (http://www.material-ui.com/#/get-started/usage) 中定义的 App.js 和 MyAwesomeReactComponent.js 文件
App.js：
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
const App = () => (
<MuiThemeProvider>
<MyAwesomeReactComponent />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
MyAwesomeReactComponent.js：
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const MyAwesomeReactComponent = () => (
<RaisedButton label="Default" />
);
export default MyAwesomeReactComponent;
但是当我运行索引文件时，我看不到任何输出。
【问题讨论】：
你检查过控制台是否有错误吗？你有没有机会用你的例子做一个基本的小提琴？或者我们可以快速“改造”你的小例子的地方？你有反应作为你的包裹的一部分吗？ 对我来说，您似乎没有使用 babael/webpack 等等.. @PraveenPrasad ，我是初学者。我被困住了，因为教程没有指导这些事情？在开始之前我应该设置什么？或任何参考资料？ 你做错了。您需要设置 babel + browserify 或 webpack 才能使其工作。 【参考方案1】：问题就在这里，因为您正在实现 ES6 代码，您需要使用像 babel 这样的 javascript 编译器将您的 ES6 代码转换为 ES5，这是浏览器支持的当前 javascript 标准。
最好将 babel 与 webpack 一起用作加载器。
遵循React's get started page 的指示是一个很好的起点。我建议仔细阅读说明。
最后，如果你想使用纯 ES6 而不进行转换，这里提供了兼容性表：https://kangax.github.io/compat-table/es6/
【讨论】：
以上是关于Material-ui React 组件不起作用的主要内容，如果未能解决你的问题，请参考以下文章
React Material UI Button组件不起作用