Question

我是ReactJs的新手，我一直想在流星框架上使用React和Material-ui建立一个网站。到目前为止，每件事似乎都很好，但最近我遇到了一些问题。

这是我的main.jsx（客户端）：

import React from 'react';
import { Meteor } from 'meteor/meteor';
var ReactDOM = require ('react-dom');

import {body_design} from '../imports/ui/ui_design/design_body.jsx';

Meteor.startup(() => {
  ReactDOM.render(
  <p>
    This is a test!
    <body_design/>
  </p>, 
  document.getElementById('main_body'));
});

正如你所知，我正在尝试渲染这里定义的body_design（在design_body.jsx中）：

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


import {Navigation_Bar} from './Template_design.jsx';

export const body_design = () => (
    <MuiThemeProvider>
        <Navigation_Bar/>
    </MuiThemeProvider>

);

最后从这里导入Navigation_Bar（在Template_design.jsx中）：

import React from 'react';
import AppBar from 'material-ui/AppBar';

// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

export const Navigation_Bar = () => (
    <AppBar
        title = "Home"
        iconClassNameRight="muidocs-icon-navigation-expand-more"
    />
);

所以令人惊讶的是，除了main.jsx里面的ReactDOM.render调用中的react元素外，我的所有导入都正常工作。当我在浏览器中启动服务器时“这是一个测试！”打印出来，但不打印出来。有趣的是导入{body_design}非常有效......

以下是展示位置的主要html：

<head>
    <title>HomePage</title>
</head>

<body>
    <div id = 'main_body'>
    </div>
</body>

因此main.jsx呈现的元素被正确定位。但由于某种原因，body_design无处可去。当我尝试访问其定义路径时，它无处可去。

非常感谢帮助，谢谢！

ReactDOM不是渲染组件

0 个答案: