解决ESLint/React/Redux（Airbnb配置）无意义报错问题

Hey there! I’ve run into this exact issue a few times when sticking to Airbnb’s ESLint rules with React class components. Let’s break down why your renderTableHeader() method is getting flagged and how to fix it.

Common Causes & Solutions #

1. You’re using this in the method but haven’t bound it to the component instance

Airbnb’s rules enforce that class methods which rely on this (to access props, state, or other component methods) are properly bound so this refers to the component itself. If you skip binding, ESLint will throw that "Expected 'this...'" error because it can’t guarantee the correct context.

Fix Options:

• Bind in the constructor: This is the traditional approach:

  class YourComponent extends React.Component {
    constructor(props) {
      super(props);
      // Bind the method to the component instance
      this.renderTableHeader = this.renderTableHeader.bind(this);
    }
  
    renderTableHeader() {
      // Now `this.props`/`this.state` will work as expected
      return (
        <thead>
          <tr>{this.props.tableHeaders.map(header => <th key={header}>{header}</th>)}</tr>
        </thead>
      );
    }
  
    render() {
      return <table>{this.renderTableHeader()}</table>;
    }
  }
  

• Use an arrow function for the method: Arrow functions automatically inherit the this context from the component, so no manual binding is needed:

  class YourComponent extends React.Component {
    // Arrow function auto-binds `this`
    renderTableHeader = () => {
      return (
        <thead>
          <tr>{this.props.tableHeaders.map(header => <th key={header}>{header}</th>)}</tr>
        </thead>
      );
    }
  
    render() {
      return <table>{this.renderTableHeader()}</table>;
    }
  }
  

2. The method doesn’t use this at all

If your renderTableHeader() doesn’t access any component props, state, or instance methods, Airbnb’s class-methods-use-this rule will flag it. The rule expects such methods to be declared as static (since they don’t depend on the component instance).

Fix: Add the static keyword and call it directly on the class:

class YourComponent extends React.Component {
  // Mark as static since it doesn't use `this`
  static renderTableHeader() {
    return (
      <thead>
        <tr><th>ID</th><th>Name</th><th>Email</th></tr>
      </thead>
    );
  }

  render() {
    // Call static method on the class, not `this`
    return <table>{YourComponent.renderTableHeader()}</table>;
  }
}

Why Airbnb Enforces This #

These rules aren’t just nitpicks—they help prevent bugs from incorrect this binding and make your code more explicit: bound methods ensure consistent context, and static methods clearly signal that a function doesn’t rely on component state/props.

内容的提问来源于stack exchange，提问作者user2190690