javascript – 空白页中结果中的附加组件没有错误消息

我最近使用npm install –save material ui将Material UI安装到我的Meteor应用程序中

我得到了< Header />组件显示在我的app.js文件中,但每当我添加其他组件时,localhost:3000只显示一个空白页面.请参阅下面的代码:

header.js

import React,{ Component } from 'react';
import AppBar from 'material-ui/AppBar';

class Header extends Component {
  render() {
    return(
      <AppBar
        title="Header"
        titleStyle={{textAlign: "center"}}
        showMenuIconButton={false}
      /> 
   );
  }
}

export default Header;

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import Header from './components/header'; 
import NewPost from './components/new_post';

const App = () => {
  return (
    <MuiThemeProvider>
      <Header />
    </MuiThemeProvider>
  );  
};

Meteor.startup(() => {
  ReactDOM.render(<App />,document.querySelector('.render-target'));
});

上面的代码工作得很好(见下面的截图)

Working with one component (<Header /></p>)

但是,如果我添加另一个组件,我会得到一个空白屏幕

header.js是一样的

new_post.js

import React,{ Component } from 'react';
import TextField from 'material-ui/TextField';

class NewPost extends Component {
  render() {
    return (
      <TextField
      hintText="Full width"
      fullWidth={true}
      />
    );
  }
}

export default NewPost;

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import Header from './components/header'; 
import NewPost from './components/new_post';

const App = () => {
  return (
    <MuiThemeProvider>
      <Header />
      <NewPost />
    </MuiThemeProvider>
  );  
};

Meteor.startup(() => {
  ReactDOM.render(<App />,document.querySelector('.render-target'));
});

结果只是一个空白屏幕

为什么在< MuiThemeProvider>中添加一个组件(< NewPost />)?导致空白屏幕?我提到了material-ui文档及其示例项目,但它们的应用程序结构与我的不同.任何建议?如果您需要更多信息以便更清楚地了解此问题,请与我们联系.

解决方法

哇很奇怪,但我设法通过简单地添加一个< div>来实现它.

app.js

const App = () => {
  return (
    <MuiThemeProvider muiTheme={getMuiTheme()}>
      <div>
        <Header />
        <NewPost />
      </div>
    </MuiThemeProvider>
  );  
}
Meteor.startup(() => {
  ReactDOM.render(<App />,document.querySelector('.render-target'));
});

我真的很感激,如果有人能解释为什么添加一个div使这一切都有效.谢谢!

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小