Transcrypt能否生成React类组件？转换时遇错误求助

我将Transcrypt官方教程里的React函数组件ListItems改写为类组件后，浏览器抛出了如下错误：

原函数组件代码：

def ListItems(props):
    items = props['items']
    return [el('li', {'key': item}, item) for item in items]

修改后的类组件代码：

class ListItems(React.Component):
    def render(self):
        items = self.props['items']
        return [el('li', {'key': item}, item) for item in items]

错误栈信息：

Uncaught TypeError: Cannot read properties of undefined (reading '__new__')
    at __class__ (app.12cad815.js:447:15)
    at Object.parcelRequire.__target__/app.js../org.transcrypt.__runtime__.js (app.12cad815.js:31357:57)
    at newRequire (app.12cad815.js:47:24)
    at localRequire (app.12cad815.js:53:14)
    at Object.parcelRequire.app.py../__target__/app.js (app.12cad815.js:31422:12)
    at newRequire (app.12cad815.js:47:24)
    at app.12cad815.js:81:7
    at app.12cad815.js:120:3

完整代码文件 #

pyreact.py #

# __pragma__('skip')
def require(lib):
    return lib

class document:
    getElementById = None
    addEventListener = None

# __pragma__ ('noskip')

React = require('react')
ReactDOM = require('react-dom')
createElement = React.createElement
useState = React.useState

def render(root_component, props, container):
    def main():
        ReactDOM.render(
            createElement(root_component, props),
            document.getElementById(container)
        )
    document.addEventListener('DOMContentLoaded', main)

app.py #

from .pyreact import useState, render, createElement, React

el = createElement

class ListItems(React.Component):
    def render(self):
        items = self.props['items']
        return [el('li', {'key': item}, item) for item in items]


def App():
    newItem, setNewItem = useState("")
    items, setItems = useState([])

    def handleSubmit(event):
        event.preventDefault()
        setItems(items + [newItem]) # __:opov
        setNewItem("")

    def handleChange(event):
        target = event["target"]
        setNewItem(target["value"])

    return el(
        "form", {"onSubmit": handleSubmit},
            el("label", {"htmlFor": "newItem"}, "New Item: "),
            el("input", {"id": "newItem", "onChange": handleChange, "value": newItem}),
            el("input", {"type": "submit"}),
            el("ol", None,
                el(ListItems, {"items": items})
            )
    )

render(App, None, 'root')

index.html #

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="app.py"></script>
  <title>React to Python</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

问题根源在于Transcrypt对Python类继承JS类的处理逻辑冲突，直接继承React.Component会让Transcrypt的运行时无法正确识别原生JS类的构造流程。需要通过__pragma__指令强制生成原生JS的类继承代码，绕过Python类的继承逻辑。

修改后的ListItems类代码：

class ListItems(React.Component):
    # 注入原生JS的构造函数，确保调用React.Component的super方法
    __pragma__('js', '{}', '''
        constructor(props) {
            super(props);
        }
    ''')
    
    def render(self):
        items = self.props['items']
        return [el('li', {'key': item}, item) for item in items]

如果上述修改仍不生效，可以直接用原生JS语法定义类组件，彻底避免兼容性问题：

__pragma__('js', 'export', '''
class ListItems extends React.Component {
    render() {
        const items = this.props.items;
        return items.map(item => React.createElement('li', {key: item}, item));
    }
}
''')

修改后直接在app.py中使用该类即可正常运行。

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