Material-ui React 组件不起作用

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 文件

应用程序.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 标准。

将 babel 与webpack 一起用作加载器是一个很好的做法。

遵循React 的入门页面的说明是一个很好的起点。 我建议仔细阅读说明。

最后，如果你想使用纯 ES6 而不进行转换，这里提供兼容性表： https : //kangax.github.io/compat-table/es6/

Material-ui React 组件不起作用

问题描述

1 个解决方案

解决方案1
0 2017-01-20 17:56:03

Material-ui React 组件不起作用

问题描述

1 个解决方案

解决方案1 0 2017-01-20 17:56:03

解决方案1
0 2017-01-20 17:56:03