Я новичок в создании приложений с использованием React. После загрузки приложения «Начало работы» непосредственно из repo я запустил сервер и стандартное приложение, обработанное правильно. Я попытался добавить компонент меню, следуя руководству here, но приложение не может выполнить рендеринг после компиляции без ошибок. Для большего контекста это приложение сохраняется в файле App.js, а не в файле с расширением .jsx.React App не рендеринг при использовании JS в HTML
Я думаю, что проблема связана с введением JS-кода через {} в HTML в пределах MenuExample.render()
. Если я заменил тело MenuExample.render()
на простой HTML-код, прокомментированный в функции, приложение отображает. Может кто-то пролить свет на то, почему приложение не рендеринга? Спасибо за помощь.
См. Полный код ниже.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
/* eslint no-var:0*/
/* eslint func-names:0*/
/* eslint prefer-arrow-callback:0*/
/* eslint class-methods-use-this:0*/
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<MenuExample items={ ['Home', 'Services', 'About', 'Contact Us'] }/>
</div>
);
}
}
class MenuExample extends Component {
// eslint-disable-next-line
getInitialState() {
return { focused: 0 };
}
clicked(index) {
this.setState({ focused: index });
}
// eslint-disable-next-line
render() {
var self = this;
return (
<div>
<ul>{this.props.items.map(function (m, index) {
var style = '';
if (self.state.focused === index) {
style = 'focused';
}
return <li className={style} onClick={self.clicked.bind(self, index)}>{m}</li>;
}) }
</ul>
<p> Selected: {this.props.items[this.state.focused]} </p>
</div>
// Simple HTML that works
// <p> Foo </p>
);
}
}
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
любая ошибка в хром-консоли? – dubes
Нет, ошибок в консоли не было – filup