Reactを使用してアプリケーションを構築するのは初めてです。 repoから直接「Getting Started」アプリをダウンロードした後、私はサーバを起動し、デフォルトのアプリを適切にレンダリングしました。チュートリアルhereに従ってMenuコンポーネントを追加しようとしましたが、エラーなしでコンパイルした後にアプリケーションがレンダリングに失敗します。より多くのコンテキストでは、このアプリケーションは.jsx拡張子のファイルではなく、App.jsというファイルに保存されます。HTMLでJSを使用するとリアクションアプリケーションがレンダリングされない
私は問題は、JSコードを{のHTMLに{}で挿入したことだと思います。 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