noLeakedRender

JSX and TSX

摘要

¥Summary

规则生效日期：v2.3.8

¥Rule available since: v2.3.8
诊断类别：lint/nursery/noLeakedRender

¥Diagnostic Category: lint/nursery/noLeakedRender
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
此规则属于以下域：

¥This rule belongs to the following domains:
- react
来源：

¥Sources:
- 灵感来自 react/jsx-no-leaked-render
  
  ¥Inspired from react/jsx-no-leaked-render

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noLeakedRender": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

防止渲染有问题的泄漏值。

¥Prevent problematic leaked values from being rendered.

此规则禁止使用可能导致 React JSX 中意外渲染值或渲染崩溃的值。使用逻辑 AND 运算符 (&&) 进行条件渲染时，如果左侧计算结果为假值（例如 0、NaN 或任何空字符串），则会渲染这些值，而不是不渲染任何内容。

¥This rule prevents values that might cause unintentionally rendered values or rendering crashes in React JSX. When using conditional rendering with the logical AND operator (&&), if the left-hand side evaluates to a falsy value like 0, NaN, or any empty string, these values will be rendered instead of rendering nothing.

示例

¥Examples

无效

¥Invalid

1
const Component = () => {
2
  const count = 0;
3
  return <div>{count && <span>Count: {count}</span>}</div>;
4
}

code-block.jsx:3:16 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Potential leaked value that might cause unintended rendering.
  
    1 │ const Component = () => {
    2 │   const count = 0;
  > 3 │   return <div>{count && <span>Count: {count}</span>}</div>;
      │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ }
    5 │ 
  
  ℹ JavaScript’s && operator returns the left value when it’s falsy (e.g., 0, NaN, ”). React will render that value, causing unexpected UI output.
  
  ℹ Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.

1
const Component = () => {
2
  const items = [];
3
  return <div>{items.length && <List items={items} />}</div>;
4
}

code-block.jsx:3:16 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Potential leaked value that might cause unintended rendering.
  
    1 │ const Component = () => {
    2 │   const items = [];
  > 3 │   return <div>{items.length && <List items={items} />}</div>;
      │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ }
    5 │ 
  
  ℹ JavaScript’s && operator returns the left value when it’s falsy (e.g., 0, NaN, ”). React will render that value, causing unexpected UI output.
  
  ℹ Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.

1
const Component = () => {
2
  const user = null;
3
  return <div>{user && <Profile user={user} />}</div>;
4
}

code-block.jsx:3:16 lint/nursery/noLeakedRender ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Potential leaked value that might cause unintended rendering.
  
    1 │ const Component = () => {
    2 │   const user = null;
  > 3 │   return <div>{user && <Profile user={user} />}</div>;
      │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ }
    5 │ 
  
  ℹ JavaScript’s && operator returns the left value when it’s falsy (e.g., 0, NaN, ”). React will render that value, causing unexpected UI output.
  
  ℹ Make sure the condition is explicitly boolean.Use !!value, value > 0, or a ternary expression.

有效

¥Valid

1
const Component = () => {
2
  const count = 0;
3
  return <div>{count > 0 && <span>Count: {count}</span>}</div>;
4
}

1
const Component = () => {
2
  const items = [];
3
  return <div>{!!items.length && <List items={items} />}</div>;
4
}

1
const Component = () => {
2
  const user = null;
3
  return <div>{user ? <Profile user={user} /> : null}</div>;
4
}

1
const Component = () => {
2
  const condition = false;
3
  return <div>{condition ? <Content /> : <Fallback />}</div>;
4
}

1
const Component = () => {
2
  const isReady = true;
3
  return <div>{isReady && <Content />}</div>;
4
}

noLeakedRender

摘要

如何配置

描述

示例

无效

有效

相关链接