Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Issue] Inheritance from JavaScript object disabled adding new methods to class

See original GitHub issue

Hi, I try to make adaptation for React for Brython (second attempt)

Test html:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="brython.js"></script>
        <script src="brython_modules.js"></script>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    </head>

    <body onload="brython(1)">
        <script type="text/python" src="lib.py" precompiled></script>
        <div id="root"></div>
    </body>
</html>

I try to inherit from JS object something like thi

class Hello(window.React.Component):
    def __init__(self):
        super().__init__(self)

    def render(self):
        return window.React.createElement('div', None, f"Hello {self.props.toWhat}")


react_obj = Hello()
print(f'react_obj is {dir(react_obj)}')
react_obj.render()

But got the error that there is no such method like render … but inherited properties are available

When I remove inheritance from JavaScript object method render appears on instance of class

Issue Analytics

State:
Created 3 years ago
Comments:10 (10 by maintainers)

Top GitHub Comments

2reactions

PierreQuentelcommented, Nov 9, 2020

@redradist The series of commits above introduce 2 new functions in the javascript module :

javascript.extends(js_class) : a decorator meant to be decorate a Python class to transform it into a Javascript class that extends the one passed as js_class
javascript.super() : meant to be used in the __init__ method of the subclass. The return value has a single attribute, __init__, that initializes the parent class

Your example works when written with these functions:

from browser import window, console, document
import javascript

React = window.React

@javascript.extends(React.Component)
class Hello:

    def __init__(self, props, children):
        javascript.super().__init__(props, children)
        self.state = {"liked": False}

    def render(self):
        if self.state["liked"]:
            return 'You liked this.'
        return React.createElement("button",
            { "onClick": lambda ev: self.setState({ "liked": True }) },
            'Like'
        )

domContainer = document['like_button_container']
window.ReactDOM.render(React.createElement(Hello), domContainer)

For the moment, I prefer to define a specific syntax for this case, instead of using standard Python inheritance (class Hello(React.Component)) and the standard built-in super(). I’m not sure of all the implications of using the standard Python mechanism for this situation.

1reaction

PierreQuentelcommented, Jan 28, 2021

I am closing the issue, hoping that the result is ok. If not, feel free to reopen it. Thanks @redradist !

Top Results From Across the Web

Disable toggle inheritance from parent tag - Stack Overflow

the reason i'm doing this is because i'm using a plugin and i want to add a button looking consistent with the overall...

Inheritance and the prototype chain - JavaScript | MDN

Calling a function with the new operator returns an object that is an instance of the function. Properties can then be added onto...

Understanding and Using Prototypical Inheritance in JavaScript

Simply put, prototypical inheritance refers to the ability to access object properties from another object. We use a JavaScript prototype to add ......

What's the Difference Between Class & Prototypal Inheritance ...

Functional inheritance: In JavaScript, any function can create an object. When that function is not a constructor (or `class`), it's called a factory...

Object-oriented JavaScript: A Deep Dive into ES6 Classes

Constructors · Keep Data Private · Referring to the Current Object · Static Properties and Methods · Subclasses · Inherit to Avoid Duplication....