Reactjs、スーパー式はnullまたは関数のいずれかでなければなりません

Question

私はReactを使ってこのデモを書いています。 Webpackを使ってこのデモを作成します。このデモを開始すると、エラーが表示されます。

エラー：

Uncaught TypeError: Super expression must either be null or a function, not undefined

import React, {Compoment} from 'react'; 
    import ReactDOM from 'react-dom'; 
    class App extends React.Compoment { 
     constructor(props){ 
      super(props); 
      this.handleClick = this.handleClick.bind(this); 
     } 
     handleClick(){ 
      if(this.myTextInput !=null) { 
       this.myTextInput.focus(); 
      } 
     } 
     render(){ 
      return (
       <div> 
        <input type="text" ref={(ref) => this.myTextInput = ref} /> 
        <input type="button" 
         value="'Focus the text input" 
          onClick={this.handleClick} 
        /> 
       </div> 
      ); 
     } 
    } 
    ReactDOM.render(<App />, document.getElementById('app')); 

私はこの問題を解決する方法がわかりません。次

Answer 1

コード内の警告のみが原因では、あなたが正しいクラスを拡張していないという事実、あなたはReact.Componentを拡張する必要があります。

class App extends React.Component { 
 
     constructor(props){ 
 
      super(props); 
 
      this.handleClick = this.handleClick.bind(this); 
 
     } 
 
     handleClick(){ 
 
      if(this.myTextInput !=null) { 
 
       this.myTextInput.focus(); 
 
      } 
 
     } 
 
     render(){ 
 
      return (
 
       <div> 
 
        <input type="text" ref={(ref) => this.myTextInput = ref} /> 
 
        <input type="button" 
 
         value="'Focus the text input" 
 
          onClick={this.handleClick} 
 
        /> 
 
       </div> 
 
      ); 
 
     } 
 
    } 
 
    ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

試してみてください。

 import React, {Component} from 'react'; 
     import ReactDOM from 'react-dom'; 
     class App extends React.Compoment { 
      constructor(props){ 
      super(props); 
      this.myTextInput = this.myTextInput.bind(this); 
      this.handleClick = this.handleClick.bind(this); 
      } 
      handleClick(){ 
      if(this.myTextInput !=null) { 
       this.myTextInput.focus(); 
      } 
      } 
      render(){ 
      return (
       <div> 
       <input type="text" ref={(ref) => this.myTextInput = ref} /> 
       <input type="button" 
        value="'Focus the text input" 
        onClick={this.handleClick} 
       /> 
       </div> 
      ); 
      } 
     } 
     ReactDOM.render(<App />, document.getElementById('app'));