Question

我正在反应组件中创建这样的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，因为在React中，它应该如何访问元素＆＃39; s 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 2

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

只是让你知道你的函数没有使用this，所以你可以把它变成一个静态函数。

Answer 3

将其转换为静态函数

source

之所以会发生这种情况，是因为此函数未使用Temp意味着它不需要动态

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

3 个答案: