Reactjs，Super 表达式必须为 null 或函数答案

【问题标题】：Reactjs, Super expression must either be null or a functionReactjs，Super 表达式必须为 null 或函数
【发布时间】：2017-05-11 10:29:06
【问题描述】：

我使用 React 编写了这个演示。我使用 Webpack 构建了这个演示。当我开始演示时，我看到了这个错误：

错误：

Uncaught TypeError: Super expression must 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'));

我不知道如何解决这个问题。

【问题讨论】：

您的代码运行良好。我已经测试过，没有看到任何警告或错误。

标签： reactjs

【解决方案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>

【讨论】：

【解决方案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'));

【讨论】：