javascript - 如何在 ES6 上导入新的 mui.Styles.ThemeManager()？

Question

我在我的项目中使用 React 和 MaterialUI。我想知道如何导入这个

var RaisedButton = mui.RaisedButton,
    ThemeManager = new mui.Styles.ThemeManager();

到 ES6

这就是我到目前为止的方式

import React from "react";
import { Link } from "react-router";
import ReactLogo from "elements/ReactLogo";
import mui from 'material-ui';

var RaisedButton = mui.RaisedButton, 
    ThemeManager = new mui.Styles.ThemeManager();

?

Answer 1

干得好：

import React from 'react';
import { Link } from 'react-router';
import ReactLogo from 'elements/ReactLogo';

import mui, { RaisedButton } from 'material-ui';
let ThemeManager = new mui.Styles.ThemeManager();

class YourAwesomeComponent extends React.Component
{
    static get childContextTypes()
    {
        return { muiTheme: React.PropTypes.object };
    }

    getChildContext()
    {
        return { muiTheme: ThemeManager.getCurrentTheme() };
    }

    render ()
    {
        return (
            <div>
                <RaisedButton />
            </div>
        )
    }
};

module.exports = YourAwesomeComponent;

MDN 文档应该可以帮助您更好地理解 es6 导入。

Answer 2

随着 es6 和 es7 的引入，语法变化非常快。试试这个。

import React from 'react'; import Message from './Message.jsx';
> 
> export default class MessageList extends React.Component{
>   constructor(){      super();        this.state = {
>             messages: [
>               'Hi Ignatius',
>               'Hello Jessy'
>             ]
>       };  }
> 
>   render(){        var messageNodes = this.state.messages.map((message)=> {
>       return (
>         <Message message={message}/>
>       );
>     });
> 
> 
>     return (
>       <div>{messageNodes}</div>
>     );   }     }