如何修复类方法“ eslint错误”要使用的“警告预期”？

小编典典

如何修复类方法“ eslint错误”要使用的“警告预期”？

reactjs

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

导出类测试扩展了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">...

阅读 532

2020-07-22

共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，因为在React中，其他方式应该如何访问React已创建的元素。

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

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;

    // ...
  }
}

2020-07-22