如何修复“警告预期 'this' 被 class 方法使用”eslint 错误？

Question

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

导出 class 测试扩展 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

我认为这是由 class-methods-use-this ESLint 规则引起的。

这只是让您知道您的函数不使用 this，因此您可以将其设为静态函数。

Answer 2

这个问题有两种不同的答案，这取决于你想如何处理它。

首先，你得到这个错误的原因是因为ESLint规则https://eslint.org/docs/rules/class-methods-use-this。具体来说，这是因为如果某些东西是 class 方法，例如如果您调用 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;

    // ...
  }
}

Answer 3

把它变成静态函数

static savePDF() { ... }

它的发生是因为这个函数没有使用 this 这意味着它不需要是动态的

如何修复“警告预期 'this' 被 class 方法使用”eslint 错误？

How can I fix 'warning Expected 'this' to be used by class method ' eslint error?

javascript

class

ecmascript-6

reactjs

eslint