React ES6超級表達式

Question

反應組件和道具有問題。以下是例外情況。 我做錯了什麼？

遺漏的類型錯誤：超級表達式必須是null或一個函數，而不是不確定的

class Component extends React.component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     name: '' 
    } 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
    this.setState({ 
     name: event.target.value 
    }); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" onChange={this.handleChange} /> 
     <p>{this.state.name}</p> 
     </div> 
    ) 
    } 
}; 

ReactDOM.render(
    <Component />, 
    document.getElementById('reactContainer') 
) 

Codepen link

Answer 1

的問題是在這條線：

class Component extends React.component { 

你React.component使用小c而不是使用C：

class Component extends React.Component { 

檢查工作代碼：

class Component extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     name: '' 
 
    } 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange(event) { 
 
    this.setState({ 
 
     name: event.target.value 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <input type="text" onChange={this.handleChange} /> 
 
     <p>{this.state.name}</p> 
 
     </div> 
 
    ) 
 
    } 
 
}; 
 

 
ReactDOM.render(
 
    <Component />, 
 
    document.getElementById('reactContainer') 
 
)

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

 

 
<div id='reactContainer'></div>