关于React组件的ESLint规则：方法渲染预期没有返回值

Question

I can't for the life of me understand why anyone would even want this rule let alone what it means. I want to return something here in the render

export default class SearchTabs extends Component {
  render() {
    const { panels, selectedTab } = this.props;
    if (!panels || panels.length === 0) return;

    let filter = null;

    const tabs = panels.member.map((panel, idx) => {
      const { id: panelId, headline } = panel;
      const url = getHeaderLogo(panel, 50);
      const item = url ?
        <img src={url} alt={headline} /> : headline;
      const classname = classNames([
        searchResultsTheme.tabItem,
        (idx === selectedTab) ? searchResultsTheme.active : null,
      ]);

      filter = (idx === selectedTab) ? this.renderFilters(panel) : filter;

      return (
        <TabItem
          classname={`${classname} search-tab`}
          headline={headline}
          idx={idx}
          content={item}
          onclick={() => {
            this.tabChanged(idx, headline);
          }}
          panelId={panelId}
        />
      );
    });

    return (
      <div className={searchResultsTheme.filters}>
        <ul className={`${searchResultsTheme.tabs} ft-search-tabs`}>{tabs}</ul>
        <div className={searchResultsTheme.dropdown}>{filter}</div>
      </div>
    );
  }
}

Answer 1

I believe your problem is the line

if (!panels || panels.length === 0) return;

It's complaining because this code path does not return anything. Try changing it to

if (!panels || panels.length === 0) return null;

Answer 2

Its because of this, if (!panels || panels.length === 0) return; . EsLint warns if return types are ambiguous because this returns undefined and later a ReactDom object.

simply if (!panels || panels.length === 0) return null; and it should be fine.

Answer 3

Regardless the other answers - the problem is caused by the consistent-return eslint, which makes sure that every function that you have will always have the same return option:

function doSomething(condition) {

    if (condition) {
        return true;
    } else {
        return;                   /*error Expected a return value.*/
    }
}

function doSomething(condition) {

    if (condition) {
        return;
    } else {
        return true;              /*error Expected no return value.*/
    }
}

function doSomething(condition) { /*error Expected to return a value at the end of this function.*/

    if (condition) {
        return true;
    }
}

It makes sense in languages like javascript that you can't force a function to return specific type/make sure it always return something (not undefined) and such.

More information can be found here:
https://eslint.org/docs/2.0.0/rules/consistent-return

In your specific code - you have 3 return options. 2 of them return jsx and 1 return undefined, which caused this specific eslint-error.