Question

我无法理解为什么有人甚至会想要这个规则，更不用说它意味着什么了。我希望在渲染中返回一些内容

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;

它抱怨，因为此代码路径不返回任何内容。尝试将其更改为

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

Answer 2

因此，if (!panels || panels.length === 0) return;。如果返回类型不明确，则EsLint会发出警告，因为这会返回undefined以及稍后的ReactDom对象。

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

Answer 3

无论其他答案如何 - 问题都是由consistent-return eslint引起的，这确保了你拥有的每个函数都将具有相同的返回选项：

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这样的语言中，你不能强制函数返回特定类型/确保它总是返回一些东西（未定义）等等。

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

在您的特定代码中 - 您有3个返回选项。其中2个返回jsx，1个返回undefined，这导致了这个特定的eslint-error。

反应组件的ESLint规则：方法渲染预期没有返回值

3 个答案: