Material-ui 工具栏未呈现预期的输出答案

【问题标题】：Material-ui toolbar not rendering the expected outputMaterial-ui 工具栏未呈现预期的输出
【发布时间】：2016-08-24 10:25:40
【问题描述】：

我正在尝试根据以下文档使用 material-ui 显示工具栏。

我的 toobar.js 文件如下所示：

import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';
import RaisedButton from 'material-ui/RaisedButton';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';

export default class ToolbarExamplesSimple extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: 3,
    };
  };

 handleChange(event, index, value) {
    this.setState({value})
};
  render() {
    return (
      <Toolbar>
        <ToolbarGroup firstChild={true}>
          <DropDownMenu value={this.state.value} onChange={this.handleChange}>
            <MenuItem value={1} primaryText="All Broadcasts" />
            <MenuItem value={2} primaryText="All Voice" />
            <MenuItem value={3} primaryText="All Text" />
            <MenuItem value={4} primaryText="Complete Voice" />
            <MenuItem value={5} primaryText="Complete Text" />
            <MenuItem value={6} primaryText="Active Voice" />
            <MenuItem value={7} primaryText="Active Text" />
          </DropDownMenu>
        </ToolbarGroup>
        <ToolbarGroup>
          <ToolbarTitle text="Options" />
          <FontIcon className="muidocs-icon-custom-sort" />
          <ToolbarSeparator />
          <RaisedButton label="Create Broadcast" primary={true} />
          <IconMenu
            iconButtonElement={
              <IconButton touch={true}>
                <NavigationExpandMoreIcon />
              </IconButton>
            }
          >
            <MenuItem primaryText="Download" />
            <MenuItem primaryText="More Info" />
          </IconMenu>
        </ToolbarGroup>
      </Toolbar>
    );
  }
}

我的 html 页面中有一个 div 元素，其 id 为“app”。我正在尝试使用 app.js 中的以下代码将工具栏绑定到该 div。

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import ToolbarExamplesSimple from './toolbar'; // Our custom react component

injectTapEventPlugin();

render(<ToolbarExamplesSimple />, document.getElementById('app'));

控制台显示如下错误：

 *Warning: Failed context type: Required context `muiTheme` was not specified in `Toolbar`.
    in Toolbar (created by ToolbarExamplesSimple)
    in ToolbarExamplesSimple*

【问题讨论】：

有什么问题？到底渲染了什么？
@LazarevAlexandr 实际上，它没有渲染任何东西。我在控制台中发现以下错误：警告：上下文类型失败：Toolbar 中未指定必需的上下文muiTheme。在工具栏中（由 ToolbarExamplesSimple 创建）在 ToolbarExamplesSimple 中
请使用此信息更新您的问题。我会在短时间内给出答复。

标签： reactjs material-ui

【解决方案1】：

您应该将您的应用组件包装在<MuiThemeProvider> 中。看看here。

import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import ToolbarExamplesSimple from './toolbar'; // Our custom react component

const App = () => (
  <MuiThemeProvider>
    < ToolbarExamplesSimple />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

【讨论】：