如何修复类方法"eslint错误"使用的“警告预期的"? [英] How can I fix 'warning Expected 'this' to be used by class method ' eslint error?

问题描述

我正在React Component内创建这样的PDF.

I am creating a PDF like this inside a react Component.

导出类Test扩展了React.PureComponent {

export class Test extends React.PureComponent {

savePDF() {
  const source = document.getElementById('printContainer');
  /* eslint new-cap: ["error", { "newIsCap": false }]*/
  let pdf = new jspdf('p', 'pt', 'letter');


  let margins = { top: 50,
    left: 60,
    width: 612
  };

  pdf.fromHTML(
    source, 
    margins.left, 
    margins.top, 
    {
      width: margins.width
    },
    () => {
      pdf.save('worksheet.pdf');
    }
  );
} 

我得到了warning Expected 'this' to be used by class method 'savePDF' class-me

被称为这样的点击onClick={this.savePDF}参见下文

this is being called an click like this onClick={this.savePDF} see below

  render() {
       <Link
      name="save-to-pdf"
      onClick={this.savePDF}
      button="secondary">
        Save to PDF</Link>
       <div id="printContainer" className="cf-app-segment--alt cf-hearings-worksheet">...

推荐答案

此问题有两种不同的答案，具体取决于您要如何处理它.

There are two different answers to this question, depending on how you want to handle it.

首先，您得到此错误的原因是ESLint规则 https://eslint.org/docs/rules/class-methods-use-this .具体来说，这是因为如果某物是类方法，例如如果要调用this.foo()来调用函数，则将其设为方法的全部原因是因为this上需要使用某些属性.

First, the reason you get this error is because of the ESLint rule https://eslint.org/docs/rules/class-methods-use-this. Specifically, this is because if something is a class method, e.g. if you are calling this.foo() to call a function, the whole reason to make it a method is because there are properties on this that you need to use.

尽管在许多使用class的语言中，大多数功能都是方法，而JS中不是这种情况.如果您有类似的课程

While in many languages with class, most functions are methods, that is not the case in JS. If you have a class like

class Example {
  constructor(){
    this.data = 42;
  }
  someMethod() {
    this.someHelper(this.data);
  }

  someHelper(value){
    console.log(value);
  }
}

someHelper函数将触发您遇到的相同错误，因为它从未使用过this，因此您可以轻松地做到

the someHelper function would trigger the same error you are getting, because it never uses this, so you can just as easily do

class Example {
  constructor(){
    this.data = 42;
  }
  someMethod() {
    someHelper(this.data);
  }
}

function someHelper(value){
  console.log(value);
}

在您的情况下，您可以执行此操作.您整个savePDF函数都可以移到class对象之外.

In your case, you can do this. Your whole savePDF function could be moved outside of the class object.

也就是说，重要的是问自己为什么这样的东西没有使用this.在大多数情况下，您希望任何与HTML一起使用的函数绝对都使用this，因为在React中还应该如何访问React已创建的元素.

That said, it is important to ask yourself why something like this isn't using this. In most cases, you'd expect any function that works with HTML to absolutely use this, because how else, in React, is it supposed to access the element's that React has created.

因此，对您的问题的真实答案是删除

So the real answer to your question would be to drop the

const source = document.getElementById('printContainer');

行.如果您需要访问由React创建的HTML元素，则应该使用React的API 这样做.

line. If you need access to the HTML element being created by React, you should be using React's APIs to do so. That would be done with something like

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

    this.printContainer = null;

    this.savePDF = this.savePDF.bind(this);
    this.handlePrintContainerRef = this.handlePrintContainerRef.bind(this);
  }

  render() {
    return (
      <div>
        <Link
          name="save-to-pdf"
          onClick={this.savePDF}
          button="secondary"
        >
          Save to PDF
        </Link>
        <div 
          id="printContainer" 
          className="cf-app-segment--alt cf-hearings-worksheet" 

          ref={this.handlePrintContainerRef}
        />
      </div>
    );
  }

  handlePrintContainerRef(el) {
    // When React renders the div, the "ref={this.handlePrintContainerRef}" will
    // make it call this function, which will store a reference.
    this.printContainer = el;
  }

  savePDF() {
    // OLD: const source = document.getElementById('printContainer');
    const source = this.printContainer;

    // ...
  }
}

这篇关于如何修复类方法"eslint错误"使用的“警告预期的"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！