React 组件的 ESLint 规则：方法渲染预期没有 return 值

Question

我这辈子都无法理解为什么会有人想要这条规则，更不用说它的含义了。我想要 return 渲染中的一些东西

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

我相信你的问题是线路

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

它在抱怨，因为这个代码路径没有 return 任何东西。尝试将其更改为

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

Answer 2

正因如此，if (!panels || panels.length === 0) return;。如果 return 类型不明确，EsLint 会发出警告，因为这个 return 是未定义的，后来是 ReactDom 对象。

只要if (!panels || panels.length === 0) return null;就可以了

Answer 3

不管其他答案如何 - 问题是由 consistent-return eslint 引起的，它确保您拥有的每个功能将始终具有相同的 return 选项：

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;
    }
}

在像 javascript 这样的语言中，你不能强制一个函数 return 特定 type/make 确保它总是 return 某些东西（不是未定义的）并且这样的

可在此处找到更多信息：
https://eslint.org/docs/2.0.0/rules/consistent-return

在您的特定代码中 - 您有 3 个 return 选项。其中 2 个 return jsx 和 1 个 return 未定义，这导致了这个特定的 eslint 错误。

React 组件的 ESLint 规则：方法渲染预期没有 return 值

ESLint Rule on React Component: Method Render expected no return value

javascript

ecmascript-6

reactjs

eslint