跨密码能产生反应类组件吗？
跨密码能产生反应类组件吗？
提问于 2022-11-04 10:19:54
我尝试将Transcrypt示例转换为使用类组件。最后是完整的代码，但主要的更改是转换此函数组件：
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完整代码基于以下教程：https://transcrypt.org/pdfs/rtptutorial.pdf
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>回答 1
Stack Overflow用户
发布于 2022-11-04 11:52:20
最后，我找到了痒反应，它给出了一个如何做到这一点的好例子。基本上，将其添加到pyreact.py中：
registered_components = {}
class ComponentMeta(type):
def __new__(meta, name, bases, attribs):
cls = type.__new__(meta, name, bases, attribs)
registered_components[name] = cls
# override the default name='cls' property to make error messages and debugging more meaningful
descrip = Object.getOwnPropertyDescriptor(cls, 'name');
descrip.value = name
Object.defineProperty(cls, 'name', descrip);
return cls
class AbstractComponent(object, metaclass=ComponentMeta):
'''Superclass for React Components. Use Component below.'''
def __init__(self, props):
object.__init__(self)
def render(self):
return 'Subclass should override render()'
class Component(AbstractComponent, React.Component.prototype):
'''Superclass for React Components. PyReact version of React.Component'''
def __init__(self, props):
AbstractComponent.__init__(self)
React.Component.apply(self, [props])然后从pyreact.Component而不是React.Component派生组件类。要使IDE高兴，还可以添加：
class Object:
pass转到pyreact.py的跳过部分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74315435
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号