React.js，超级表达式必须为null或函数

Question

我使用React编写此演示。我使用Webpack来构建此演示。启动此演示时，错误将显示给我。

错误：

未捕获的TypeError：超级表达式必须为null或函数，且未定义

 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>