javascript - 如何修复 'warning Expected ' this' to be use by class method ' eslint 错误？

Question

我正在 React 组件中创建这样的 PDF。

导出类 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');
    }
  );
} 

我收到警告预期“this”将被类方法“savePDF”类使用

这被称为像这样的点击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)

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，因为在 React 中，它应该如何访问 React 拥有的元素创建。

因此，您问题的真正答案是放弃

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

线。如果您需要访问 React 创建的 HTML 元素，您应该是 using React's APIs这样做。这可以通过类似的事情来完成

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;

    // ...
  }
}