<MuiThemeProvider /> 中的其他组件导致空白页没有错误消息

Question

我最近使用 npm install --save material ui

在我的 Meteor 应用程序中安装了 Material UI

我的 <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 文档和他们的示例项目，但他们的应用程序结构与我的不相似。有什么建议吗？如果您需要更多信息以使这个问题更清楚，请告诉我。

Answer 1

哇，很奇怪，但我设法通过简单地添加一个 <div>

让它工作

app.js

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

如果有人能解释为什么添加 div 可以使这一切正常进行，我将不胜感激。谢谢！

Answer 2

I would really appreciate if anyone could explain why adding a div makes this all work

如果您查看浏览器警告，“提供给 MuiThemeProvider 的 array 类型的道具 children 无效， 需要单个 ReactElement .".

因此，当您在组件周围添加 <div/> 时，它会将它们包装在一起并将它们变成一个单一的反应元素。

Answer 3

MuiThemeProvider 呈现为 null，因此您必须包装 children 做任何事情 - 例如 React.Fragment

<MuiThemeProvider /> 中的其他组件导致空白页没有错误消息

Additional component in <MuiThemeProvider /> results in blank page w/ no error messages

javascript

meteor

material-ui