寻求ESLint规则：禁止JSX文本节点与其他节点混合以兼容DOM插件

是否已有现成规则？ #

据我了解，目前没有官方或社区广泛使用的ESLint规则专门针对这个场景。虽然eslint-plugin-react里有一些JSX相关规则，但它们主要聚焦通用的JSX最佳实践，并没有直接强制要求将条件渲染的文本节点包裹在React元素中，以此避免第三方DOM篡改工具引发的冲突。

自定义规则的实现思路 #

如果要自己写这个ESLint规则，可以按照以下步骤来：

1. 明确规则的检测目标 #

我们需要检测的是：在JSX元素的直接子节点中，是否存在条件表达式（比如condition && 'text'这类逻辑与表达式）返回文本字面量的情况。需要排除已经被元素包裹的文本（比如condition && <span>text</span>是合法的）。

2. 遍历AST节点 #

ESLint规则通过遍历抽象语法树（AST）来检查代码：

• 定位到JSXElement节点（也就是React元素，比如<div>）。
• 遍历该元素的children属性，找到其中的JSXExpressionContainer节点（也就是{}包裹的表达式）。
• 检查表达式容器内的节点类型：如果是LogicalExpression（逻辑表达式，比如&&），并且其右侧是Literal（字符串字面量），同时这个表达式没有被包裹在另一个JSXElement里，就标记为错误。

3. 编写规则核心逻辑 #

举个简化的代码示例（基于ESLint规则API）：

module.exports = {
  meta: {
    type: 'problem',
    docs: {
      description: 'Enforce conditional text nodes are wrapped in React elements',
      recommended: true,
    },
    fixable: null,
    schema: [],
  },
  create(context) {
    return {
      JSXElement(node) {
        // 遍历当前JSX元素的所有子节点
        node.children.forEach(child => {
          // 只处理{}包裹的表达式节点
          if (child.type === 'JSXExpressionContainer') {
            const expr = child.expression;
            // 检查是否是condition && 'text'这类逻辑与表达式
            if (expr.type === 'LogicalExpression' && expr.operator === '&&') {
              const rightExpr = expr.right;
              // 右侧是字符串字面量，且这个表达式没有被包裹在其他JSX元素中
              if (rightExpr.type === 'Literal' && typeof rightExpr.value === 'string') {
                context.report({
                  node: child,
                  message: 'Conditional text nodes must be wrapped in a React element (e.g., <span>) to avoid DOM manipulation conflicts',
                });
              }
            }
          }
        });
      },
    };
  },
};

4. 扩展规则的覆盖范围 #

可以进一步优化规则，比如：

• 支持检测其他条件表达式（比如三元表达式condition ? 'text' : null）。
• 排除一些特殊情况，比如文本节点是数字或者其他非字符串字面量（如果你的应用允许的话）。
• 允许某些安全的文本节点场景（比如直接的非条件文本{'Welcome'}，这类通常不会引发Google Translate的问题）。

5. 测试和集成 #

写完规则后，用ESLint的测试工具编写测试用例，验证规则能正确识别错误案例和通过合法案例，然后将自定义规则集成到你的项目ESLint配置中。

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