Question

您好我正在使用Material Ui为我选择的css库开发一个新的React应用程序。我试图让它与react-router一起玩得很好。我不确定我应该把MuiThemeProvider放在哪里。 docs示例将主应用程序组件包装在其周围。

没有来自react-router的任何其他组件，这样可以正常工作。但是当我想从react路由器渲染其余的子组件时，它会抛出一个错误。

Index.js

  import React from "react";
  import ReactDOM from "react-dom";
  import injectTapEventPlugin from "react-tap-event-plugin";
  import routes from "./routes";
  import { Router, browserHistory} from "react-router";
  import "../public/css/index.css";
  import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

  injectTapEventPlugin();

  ReactDOM.render(
       <MuiThemeProvider>
          <Router history={browserHistory} routes={routes} />
      </MuiThemeProvider>,
       document.getElementById("root")
  );

和App.js

import React, { Component } from "react";
import NavigationBar from "./NavigationBar";

class App extends Component {
  render() {
    return (
      <div>
        <NavigationBar />
        {this.props.children}
      </div>
     );
  }
}   

export default App;

抛出的错误是这个

warning.js：36警告：React.createElement：类型无效 - 预期字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。你可能忘了导出你的来自其定义的文件中的组件。检查。的render方法 WelcomePage。

和

未捕获错误：元素类型无效：需要一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：未定义。您可能忘记从中导出组件它定义的文件。检查WelcomePage的render方法。在不变量（invariant.js：44）在instantiateReactComponent（instantiateReactComponent.js：77）在instantiateChild（ReactChildReconciler.js：44）在ReactChildReconciler.js：71 在traverseAllChildrenImpl（traverseAllChildren.js：77）在traverseAllChildren（traverseAllChildren.js：172）在Object.instantiateChildren（ReactChildReconciler.js：70）在ReactDOMComponent._reconcilerInstantiateChildren（ReactMultiChild.js：187）在ReactDOMComponent.mountChildren（ReactMultiChild.js：226）在ReactDOMComponent._createInitialChildren（ReactDOMComponent.js：697）

Answer 1

我通常用MuiThemeProvider组件包装主容器的内容。

例如在我的路由器中我（注意AppContainer作为基本组件）：

<Router history={browserHistory}>
    <Route path="/" component={AppContainer}>
        <IndexRoute
            getComponent={(nextState, cb) => {
                System.import('./containers/home/home')
                    .then(loadRoute(cb))
                    .catch(errorLoading);
            }}
        />
    </Route>
</Router>

在这个AppContainer中我有：

class AppContainer extends Component {
    render() {
        return (
            <MuiThemeProvider muiTheme={muiTheme}>
                <div className="content">
                    <h1>Here is my app</h1>
                    {this.props.children}
                </div>
            </MuiThemeProvider>
        );
    }
}

我在哪里放置MuiThemeProvider组件？

1 个答案: