代码之家 › 专栏 › 技术社区 › PositiveGuy

React组件上的ESLint规则:方法呈现预期无返回值

eslint ecmascript-6 reactjs javascript

PositiveGuy · 技术社区 · 9 年前

在渲染器中返回某些内容

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

3 回复 | 直到 9 年前

TLadd 9 年前

我相信你的问题是线路

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

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

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

Pulasthi Bandara 9 年前

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

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

Dekel 9 年前

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错误。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前