Я новичок в 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"
/>
);
Итак, что удивительно, все мои импорты работают правильно, за исключением элемента реакции в вызове ReactDOM.render внутри main.jsx. Когда запускаю сервер в браузере "Это тест!" распечатывается, но не . Самое интересное, что import{body_design} работает отлично...
Вот основной html для размещения:
<head>
<title>HomePage</title>
</head>
<body>
<div id = 'main_body'>
</div>
</body>
Таким образом, элементы, отображаемые main.jsx, расположены правильно. Но почему-то body_design никуда не ведет. Когда я пытаюсь получить доступ к его пути определения, он никуда не ведет.
Помощь очень ценится спасибо!
