如何用静态代码分析器提取React组件Props？Python识别组件方案问询

实现思路 #

要识别React代码中的<Product>这类自定义组件，核心是解析JSX代码生成抽象语法树（AST），然后遍历AST提取目标节点：

• JSX是JavaScript的扩展，需要先解析其语法结构，生成可遍历的AST。
• 找到AST中的JSXElement节点，提取其openingElement的名称属性。
• 利用React的约定：自定义组件首字母大写，以此区分原生HTML元素（如<div>）和自定义组件。

可用的语法树生成库及实现示例 #

1. PyJSX

PyJSX专门用于解析JSX代码生成AST，无需提前转换JSX，直接处理源码：

• 安装：pip install pyjsx
• 示例代码：

import pyjsx

def extract_custom_components(jsx_code):
    ast = pyjsx.parse(jsx_code)
    components = []

    def traverse(node):
        # 识别JSX元素节点
        if hasattr(node, 'type') and node.type == 'JSXElement':
            opening_node = node.openingElement
            # 筛选首字母大写的自定义组件
            if (opening_node.name.type == 'JSXIdentifier' 
                and opening_node.name.value[0].isupper()):
                components.append(opening_node.name.value)
            # 递归遍历子节点
            for child in node.children:
                traverse(child)
        # 处理表达式节点（比如map回调里的JSX）
        elif hasattr(node, 'expression'):
            traverse(node.expression)
        # 处理代码块节点
        elif hasattr(node, 'body'):
            for item in node.body:
                traverse(item)

    traverse(ast)
    return list(set(components))

# 读取示例文件Cart.js
with open('Cart.js', 'r', encoding='utf-8') as f:
    code = f.read()

print(extract_custom_components(code))  # 输出: ['Product', 'Modifier']

2. 结合Babel + Python AST解析工具

如果需要兼容更复杂的JSX语法，可先用Babel将JSX转换为标准JavaScript（转换为React.createElement调用），再用Python的AST库解析：

• 先安装Babel：npm install @babel/core @babel/preset-react -g
• 转换JSX：babel Cart.js --presets @babel/preset-react -o Cart.transformed.js
• 用Python解析转换后的代码：

import ast

def extract_components_from_transformed_js(js_code):
    tree = ast.parse(js_code)
    components = []

    def traverse(node):
        if isinstance(node, ast.Call):
            # 查找React.createElement调用
            if (isinstance(node.func, ast.Attribute) 
                and node.func.attr == 'createElement'
                and isinstance(node.func.value, ast.Name)
                and node.func.value.id == 'React'):
                # 第一个参数是组件名
                component_arg = node.args[0]
                if isinstance(component_arg, ast.Name):
                    components.append(component_arg.id)
            # 递归遍历子节点
            for arg in node.args:
                traverse(arg)
        elif isinstance(node, ast.FunctionDef) or isinstance(node, ast.Lambda):
            traverse(node.body)
        elif isinstance(node, ast.Expression):
            traverse(node.body)
        elif isinstance(node, ast.Block):
            for item in node.body:
                traverse(item)

    traverse(tree)
    return list(set(components))

with open('Cart.transformed.js', 'r', encoding='utf-8') as f:
    transformed_code = f.read()

print(extract_components_from_transformed_js(transformed_code))  # 输出: ['Product', 'Modifier']

注意事项 #

• 递归遍历AST时要覆盖所有可能包含JSX的节点类型（如表达式、回调函数体等）。
• 若要更精准识别（比如排除全局导入的组件），可结合AST中的导入语句节点，匹配组件名与导入的标识符。

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