Question

问候陨石！

我正在将材料ui（基于反应）包含到现有的blaze应用程序中。我使用流星指南和材料-ui文档作为我的指示正确地执行此操作，但遗憾的是无济于事。有没有人成功地做过这件事？根据材料-ui文档，您应该将MuiThemeProvider注入主应用程序组件，但我不断收到以下错误：

MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

这是我的root blaze html模板：

<template name="main">
  <head>...</head>
  <body>
    <div id="wrap">
      <div id="react-app-wrapper">
        {{> React component=App}}
      </div>
    </div>
 </body>
</template>

注意我使用https://guide.meteor.com/react.html#react-in-blaze作为我的指导方针，并使用meteor包react-template-helper。

这是我的main.js文件：

if(Meteor.isClient){
  import App from './users/client/ui/components/App.js';
  Template.main.onCreated(function(){
  });
  Template.main.helpers({
    'App' : function(){
      return App;
    }
}

我的App.js组件文件：

import React, { Component, PropTypes } from 'react';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const lightMuiTheme = getMuiTheme(lightBaseTheme);

export default class App extends Component{
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div>
        <MuiThemeProvider muiTheme={lightMuiTheme} >
        </MuiThemeProvider >
      </div>
    );
  }
}

感谢您的帮助！我已经尝试了一切，现在感觉很难过。 :(如果你给出正确的答案，我会明显标记为这样！亚历

Answer 1

这就是MuiThemeProvider renders

的方式

render() {
  return this.props.children;
}

因此，React实际上抱怨没有任何东西需要渲染，因为这是你使用它。

render() {
  return (
    <div>
      <MuiThemeProvider muiTheme={lightMuiTheme} >
        {/* There should be something here. */}
      </MuiThemeProvider >
    </div>
  );
}

开始提供一些可以为您服务的内容。

这里的一个侧面通知是外部<div>包装器可以在没有特定用途的前提下丢弃。

祝你好运！

材料UI主题提供程序未正确包含在react / blaze应用程序中

1 个答案: