[英]How can I fix 'warning Expected 'this' to be used by class method ' eslint error?
I am creating a PDF like this inside a react Component.我正在反应组件中创建这样的 PDF。
export class Test extends React.PureComponent {导出类测试扩展 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');
}
);
}
and I am getting warning Expected 'this' to be used by class method 'savePDF' class-me
并且我收到warning Expected 'this' to be used by class method 'savePDF' class-me
this is being called an click like this onClick={this.savePDF}
see below这被称为这样的点击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">...
There are two different answers to this question, depending on how you want to handle it.这个问题有两种不同的答案,取决于你想如何处理它。
First, the reason you get this error is because of the ESLint rule https://eslint.org/docs/rules/class-methods-use-this .首先,你得到这个错误的原因是因为ESLint规则https://eslint.org/docs/rules/class-methods-use-this 。 Specifically, this is because if something is a class method, eg if you are calling this.foo()
to call a function, the whole reason to make it a method is because there are properties on this
that you need to use.具体来说,这是因为如果某个东西是一个类方法,例如,如果您正在调用this.foo()
来调用一个函数,那么将其作为一个方法的全部原因是因为您需要使用this
上的属性。
While in many languages with class
, most functions are methods, that is not the case in JS.虽然在许多带有class
语言中,大多数函数都是方法,但在 JS 中并非如此。 If you have a class like如果你有一个类
class Example {
constructor(){
this.data = 42;
}
someMethod() {
this.someHelper(this.data);
}
someHelper(value){
console.log(value);
}
}
the someHelper
function would trigger the same error you are getting, because it never uses this
, so you can just as easily do someHelper
函数会触发您遇到的相同错误,因为它从不使用this
,因此您可以轻松做到
class Example {
constructor(){
this.data = 42;
}
someMethod() {
someHelper(this.data);
}
}
function someHelper(value){
console.log(value);
}
In your case, you can do this.在你的情况下,你可以这样做。 Your whole savePDF
function could be moved outside of the class
object.您的整个savePDF
函数可以移到class
对象之外。
That said, it is important to ask yourself why something like this isn't using this
.也就是说,重要的是要问自己为什么这样的东西不使用this
。 In most cases, you'd expect any function that works with HTML to absolutely use this
, because how else, in React, is it supposed to access the element's that React has created.在大多数情况下,您希望任何与 HTML 一起使用的函数都绝对使用this
,因为在 React 中,它应该如何访问 React 创建的元素。
So the real answer to your question would be to drop the所以你问题的真正答案是放弃
const source = document.getElementById('printContainer');
line.线。 If you need access to the HTML element being created by React, you should be using React's APIs to do so.如果您需要访问由 React 创建的 HTML 元素,您应该使用 React 的 API来执行此操作。 That would be done with something like这将用类似的东西来完成
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;
// ...
}
}
I believe that's caused by the class-methods-use-this
ESLint rule.我相信这是由class-methods-use-this
ESLint 规则引起的。
It's just letting you know that your function doesn't use this
, so you can probably make it a static function.它只是让您知道您的函数不使用this
,因此您可以将其设为静态函数。
turn it into static function把它变成静态函数
static savePDF() { ... }
Its happening because this function isnt using this
meaning it dosnt need to be dynamic它的发生是因为这个函数没有使用this
意味着它不需要是动态的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.