且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何修复类方法"eslint错误"使用的“警告预期的"?

更新时间:2022-06-16 09:21:55

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

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;

    // ...
  }
}