如何修复"警告预期'这个'由类方法'使用的eslint错误？

Question

我在react Component中创建了这样的PDF.

export class Test扩展了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}如下所示

  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">...

Answer 1

这个问题有两个不同的答案,具体取决于你想要如何处理它.

首先,之所以出现这种错误是因为ESLint规则https://eslint.org/docs/rules/class-methods-use-this.具体地讲,这是因为,如果事情是一个类的方法,例如,如果你调用this.foo()调用一个函数,整个原因使它的方法是,因为有对性能this,你需要使用.

虽然在许多语言中class,大多数函数都是方法,但在JS中并非如此.如果你有类似的课程

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

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

该someHelper函数会触发您获得的相同错误,因为它永远不会使用this,因此您可以轻松地执行此操作

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

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

在您的情况下,您可以这样做.您的整个savePDF功能可以移动到class对象之外.

也就是说,重要的是要问自己为什么这样的东西没有使用this.在大多数情况下,你所期望的,与HTML工作的任何功能完全使用this,因为是怎么回事,在反应,被它应该访问反应创造元素的.

所以你问题的真正答案就是放弃

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

线.如果您需要访问由React创建的HTML元素,您应该使用React的API来执行此操作.这可以用类似的东西来完成

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;

    // ...
  }
}