HTMLでJSを使用するとリアクションアプリケーションがレンダリングされない

Question

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

Answer 1

あなたがサポートされていないes6クラスを使用して作成したコンポーネントを反応内getInitialStateライフサイクルメソッドを使用しようとしています。コンストラクタに変更し、コンストラクタ内の初期状態を設定する必要があります。

class MenuExample extends Component { 
    // eslint-disable-next-line 
    constructor(props) { 
    super(props); 
    this.state = { focused: 0 }; 
    } 
    ... 

説明されているhereです。