是否存在ESLint规则禁止在React组件内定义含JSX的变量？

你可以通过两种方式实现这个需求：用ESLint的内置规则配置，或者编写自定义规则。以下是具体方案：

1. 利用ESLint内置的no-restricted-syntax规则 #

无需额外插件，通过配置no-restricted-syntax来匹配组件内部将JSX赋值给变量的模式。在你的ESLint配置文件（如.eslintrc.js）中添加如下规则：

module.exports = {
  rules: {
    "no-restricted-syntax": [
      "error",
      {
        selector: "VariableDeclarator[init.type=/JSXElement|JSXFragment/]:function > BlockStatement > *",
        message: "禁止在组件内部将JSX片段赋值给变量，请拆分为独立组件",
      },
    ],
  },
};

这个规则会匹配函数组件的代码块内，所有初始化值为JSX元素或片段的变量声明，触发错误提示。

2. 编写自定义ESLint规则（更灵活） #

如果内置规则的匹配逻辑不够精准，可以编写自定义规则来精确识别目标模式。核心思路是遍历AST，找到函数组件内部的变量声明，检查其初始化值是否为JSX节点：

// eslint-plugin-custom/rules/no-jsx-variables-in-components.js
module.exports = {
  create(context) {
    return {
      VariableDeclarator(node) {
        // 判断当前变量是否在函数组件内部
        const isInsideComponent = context.getAncestors().some(ancestor => 
          ancestor.type === 'FunctionDeclaration' || 
          (ancestor.type === 'ArrowFunctionExpression' && ancestor.parent.type === 'VariableDeclarator')
        );
        // 判断初始化值是否为JSX
        const isJSXInit = node.init && ['JSXElement', 'JSXFragment'].includes(node.init.type);
        
        if (isInsideComponent && isJSXInit) {
          context.report({
            node,
            message: '组件内部禁止定义含JSX的变量，请拆分为独立组件',
          });
        }
      },
    };
  },
};

然后在ESLint配置中引入这个自定义插件即可。

重构建议 #

这类写法导致重渲染和状态问题的核心原因是：每次组件渲染时，这些JSX变量都会被重新创建，React无法复用它们的状态和渲染结果。正确的替代方案是将这些JSX片段拆分为独立的函数组件，比如：

function Header() {
  return (
    <div>
      <h1>This is a title</h1>
    </div>
  );
}

function Body() {
  return (
    <div>
      <p>This is a paragraph</p>
      <ul>
        <li>Here's a list with some items</li>
        <li>Another item</li>
        <li>One more item</li>
      </ul>
    </div>
  );
}

function Footer() {
  return (
    <div>
      <p>This is a footer</p>
    </div>
  );
}

function MyComponent() {
  return (
    <>
      <Header />
      <Body />
      <Footer />
    </>
  );
}

拆分后，React可以独立管理每个子组件的渲染和状态，避免原写法带来的问题。

内容的提问来源于stack exchange，提问作者Nico Martinucci