Question

我是新手，想要编写一个简单的点击事件功能。
当我点击选择带有此类名称的span标记
我在codepen中编写了一个小型原型，并在那里工作得很好......
但如果我在我的代码库中包含相同的代码，则会抛出错误...
你们知道这是什么问题
即使在codepen中也显示错误 unknown：类构造函数之外的super（）（16：8）

处理小型原型代码 http://codepen.io/anon/pen/rxPvyr?editors=0110

尝试修复错误的实际代码库 http://codepen.io/kk-/pen/BjeLry

Line 16: Direct super call is illegal in non-constructor, use super."constructor"() instead
  14 | 
  15 |     constructor(props) {
> 16 |         super(props);
     |         ^
  17 |         
  18 |         this.handleClick = this.handleClick.bind(this);

Answer 1

有几种方法可以定义一个React类 - 你可能混合和匹配样式，当然不支持：

ES5 - 没有constructor()方法，请使用getInitialState()

var React = require('react');

var SomeComponent = React.createClass({
    getInitialState: function() {
        return { message: 'hello world'};
    },
    render() {
        return (
            <div>{this.state.message}</div>
        );
    }
});

module.exports = SomeComponent;

ES6 - 否getInitialState()，使用constructor()此外，必须在调用super(props)之前调用this！

import React from 'react';

class SomeComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state({
            message: 'hello world'
        })
    }
    render() {
        return (
            <div>{this.state.message}</div>
        );
    }
}

SomeComponent.propTypes = {};

export default SomeComponent;

更新：如果有人忘记在super(props)中呼叫constructor()，但随后尝试访问this，则会引发以下错误：{{1 }}：

'this' is not allowed before super()

以下是有关其原因的更多信息：https://discuss.reactjs.org/t/should-we-include-the-props-parameter-to-class-constructors-when-declaring-components-using-es6-classes/2781

ES6静态没有内部方法，只是隐含的Module build failed: SyntaxError: C:/_workspaces/hello-world/some-component.jsx: 'this' is not allowed before super() 20 | class SomeComponent extends React.Component { 21 | constructor(props) { > 22 | this.state = { | ^ 23 | message: 'hello world' 24 | } 25 | }

render()

直接超级调用在非构造函数中是非法的，使用super。“constructor”（）代替

1 个答案: