相关疑难解决方法(0)

我可以在反应组件的构造函数中使用箭头函数吗?

这个问题类似于使用React时最好使用胖箭头函数还是在构造函数中绑定函数?但有点不同.您可以this在构造函数中绑定函数,或者只在构造函数中应用箭头函数.请注意,我只能在项目中使用ES6语法.

1.

class Test extends React.Component{
  constructor(props) {
    super(props);

    this.doSomeThing = this.doSomeThing.bind(this);
  }

  doSomething() {}
}
Run Code Online (Sandbox Code Playgroud)

2.

class Test extends React.Component{
  constructor(props) {
    super(props);

    this.doSomeThing = () => {};
  }
}
Run Code Online (Sandbox Code Playgroud)

这两种方式的优点和缺点是什么?谢谢.

javascript constructor ecmascript-6 reactjs arrow-functions

17
推荐指数
1
解决办法
7077
查看次数

创建具有不同范围的ES6/ESNext原型函数(不是内联函数)

好吧我们有这个:

class Car {
    constructor(name) {
        this.kind = 'Car';
        this.name = name;
    }

    printName() {
        console.log('this.name');
    }
}
Run Code Online (Sandbox Code Playgroud)

我想要做的是定义printName,如下所示:

class Car {
    constructor(name) {
        this.kind = 'Car';
        this.name = name;
    }

    // we want to define printName using a different scope
    // this syntax is close, but is *not* quite correct
    printName: makePrintName(foo, bar, baz) 
}
Run Code Online (Sandbox Code Playgroud)

其中makePrintName是一个仿函数,如下所示:

exports.makePrintName = function(foo, bar, baz){
   return function(){ ... }
};
Run Code Online (Sandbox Code Playgroud)

这可能与ES6有关吗?我的编辑器和TypeScript不喜欢这个

注意:使用ES5,这很容易做到,看起来像这样:

var Car = function(){...};

Car.prototype.printName = makePrintName(foo, bar, baz);
Run Code Online (Sandbox Code Playgroud)

使用类语法,目前最适合我的方法是:

const …
Run Code Online (Sandbox Code Playgroud)

javascript typescript ecmascript-6

11
推荐指数
2
解决办法
361
查看次数

ES6函数,箭头函数和ES6类中的"this"

class App extends Component {
  constructor(props) {
    ...
  }

  onChange = (e) => this.setState({term: e.target.value})

  onSubmit(e){
    e.preventDefault();
    const api_key = "C1hha1quJAQZf2JUlK";
    const url = `http://api.giphy.com/v1/gifs/search?q=${this.state.term}&api_key=${api_key}`;
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input value={this.state.term} onChange={this.onChange}/>
          <button>Search!</button>
        </form>
      </div>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

在类中声明的两种类型的函数(onChange和onSubmit)之间有什么区别.我在const url中引用this.sate时出错,如果我将其声明为ES6类方法但将其更改为箭头函数则修复它.

我想知道在这两种情况下如何处理"这个"

另外,我该怎么做呢?比方说,如果我想使用相同的onSubmit函数(ES6类方法),但是当我调用它时(在表单元素中)想要处理它,我该怎么做?

使用this.onSubmit.bind(this)

javascript ecmascript-6 reactjs arrow-functions es6-class

5
推荐指数
1
解决办法
4345
查看次数

打字稿装饰器不适用于箭头函数

我有一个 typescript 装饰器工厂,它控制台记录执行函数所花费的总时间、实际函数执行结果和传递给装饰器的参数。

例如

export function performaceLog(...args: any[]) {
return (target: Object, key: string, descriptor: TypedPropertyDescriptor<any>) => {
    var msg = '';
    if (args.length != 0) {
        msg = args.map(arg => arg).join(' ');
    }

    if (descriptor === undefined) {
        descriptor = Object.getOwnPropertyDescriptor(target, key);
    }

    if (typeof descriptor.value !== 'function') {
        throw new SyntaxError('Only functions can be used with log decorators');
    }

    var originalMethod = descriptor.value.bind(target);

    descriptor.value = function() {
        var funcArgs: any = [];
        for (var i = 0; i …
Run Code Online (Sandbox Code Playgroud)

javascript decorator typescript ecmascript-6 typescript-decorator

5
推荐指数
1
解决办法
3620
查看次数

无法使用super调用继承的类函数

我试图从子类调用父类的函数,但关键字super是抛出和错误。我正在使用打字稿,这是项目中 package.json 的一个片段。

{
  "scripts": {
    "build": "tsc",
    "start": "nodemon",
    "prod": "npm run build && npm run start"
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "dotenv": "^6.1.0",
    "express": "^4.16.4"
  },
  "devDependencies": {
    "@types/body-parser": "^1.17.0",
    "@types/dotenv": "^4.0.3",
    "@types/express": "^4.16.0",
    "@types/node": "^10.12.2",
    "nodemon": "^1.18.5",
    "ts-node": "^7.0.1",
    "tslint": "^5.11.0",
    "typescript": "^3.1.6"
  }
}
Run Code Online (Sandbox Code Playgroud)

父类

export default class baseController {

  public response = (message = "", status = 200) => (
    req: Request,
    res: Response
  ) => {
    return res.status(status).send({
      status: true, // true …
Run Code Online (Sandbox Code Playgroud)

javascript node.js express typescript tsconfig

1
推荐指数
2
解决办法
968
查看次数