我最近使用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'));
});
上面的代码工作得很好(见下面的截图)
但是,如果我添加另一个组件,我会得到一个空白屏幕
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使这一切都有效.谢谢！