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'));