Question

我正在尝试使用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;

但是当我运行索引文件时，我看不到任何输出。

Answer 1

问题出在这里，因为你正在实现ES6代码，你需要使用像babel这样的javascript编译器将你的ES6代码转换为ES5，这是浏览器支持的当前javascript标准。

使用带有webpack的babel作为装载程序是一个好习惯。

Follwoing React's get started page的指示是一个很好的起点。我建议不要跳过任何一个字。

最后，如果您想在不进行转换的情况下使用纯ES6，可以在此处找到兼容性表：https://kangax.github.io/compat-table/es6/

Material-ui React组件无法正常工作

1 个答案: