I have a basic React app and I'd like to put some commonly used functionality into a base component class and have all my other components inherit from that class to get access to those features. I have this:
export class BaseComponent extends React.Component {
constructor() {
super();
this.commonlyUsedMethod = this.commonlyUsedMethod.bind(this);
}
commonlyUsedMethod() {
let x = this.someValue; // <--- 'this' is undefined here
}
}
export class SomeComponent extends BaseComponent {
onButtonClick() {
super.commonlyUsedMethod();
}
render() {
return whatever;
}
}
The problem is that when I call super.commonlyUsedMethod() from the derived class, this.someValue blows up inside BaseComponent.commonlyUsedMethod() because this is undefined. I'm calling this.commonlyUsedMethod.bind(this); in the BaseComponent constructor, so I'm not sure what's going on.
First of all I (and most of the React dev community) don't recommend you to use inheritance. https://facebook.github.io/react/docs/composition-vs-inheritance.html
Most of the use cases you have you can solve it using Higher Order Components or writing functions in a JS file and importing it.
If you still want to go ahead and do this.
You need to bind the this when you attach the buttonClick listener
export class SomeComponent extends BaseComponent {
onButtonClick() {
super.commonlyUsedMethod();
}
render() {
return <div onClick={this.onButtonClick.bind(this)}>Hello</div>;
}
}
Here is the working example for it. https://www.webpackbin.com/bins/-Knp4X-n1RrHY1TIaBN-
Update: Problem was not with calling super with proper this, problem was with not binding proper this when attaching the onClick listener. Thanks #Mayank for pointing it out.
So I'm not sure if this a Good Practice™, but I can get it to work by calling this.someCommonMethod() instead of super.someCommonMethod(), like this:
export class SomeComponent extends BaseComponent {
constructor() {
super();
this.onButtonClick = this.onButtonClick.bind(this);
}
onButtonClick() {
this.commonlyUsedMethod(); <--- changed 'super' to 'this'
}
render() {
return whatever;
}
}
I'm new enough to React and ES6 not to know if this is how this should work. Any thoughts would be appreciated.
Related
I'm implementing an inherit action to archive my goal.
My goal is to call a lifecycle event in child component instead of parent one. That's what I can do in C# .net. How can I archive it? Is there any difference?
When I call lifecycle event in parent component, it works fine
Here's my code
class A extends React.Component {
render() {
return (
//......
)
}
}
class B extends A {
componentDidMount() {
console.log('componentDidMount') // didn't log here
}
componentDidUpdate(prevProps) {
console.log('componentDidUpdate:', prevProps) // didn't log here
}
}
Thanks all
This is quite tricky.
In JavaScript, a class cannot extend from multiple classes, which is also known as “multiple inheritance”. In JavaScript, objects can only be associated with a single prototype, and extending multiple classes would mean that an object associates with multiple prototypes, which is not possible.
Also, to have lifecycle methods, the class should extend React.Component.
So you can either extend React.Component or Component A.
Multiple inheritance doesn't allow in javascript by the time I'm writing this. And life-cycle event will work only if you extends React.Component. So, you should not extends another component in react. The recommended way is - use composition pattern instead of inheritance.
import B from './B';
class A extends React.Component {
render() {
return (
<B />
//.......
)
}
}
class B extends React.Component {
componentDidMount() {
console.log('componentDidMount')
}
componentDidUpdate(prevProps) {
console.log('componentDidUpdate:', prevProps)
}
}
Now it will work. Hope you will figure out the problem. For more please visit reactjs composition vs inheritance
the trick is to use super.componentDidMount() in the child component
componentDidMount() {
super.componentDidMount();
console.log('componentDidMount')
}
here you can find the working code
https://codesandbox.io/s/crazy-snow-1k9t2?file=/src/App.js
Does class variables in a class need to be a part of the stateObject? I tried below with no luck. Here there is samples with simple variables so I am kind of surprice below does not work (alert says undefined)?
https://www.w3schools.com/react/react_es6.asp
https://codesandbox.io/s/jovial-glade-lfv4f?fontsize=14&hidenavigation=1&theme=dark
import React, { Component } from "react";
class Test extends Component {
constructor(props) {
super(props);
this.variable = "works";
}
clicked() {
alert(this.variable);
}
render() {
return <div onClick={this.clicked}>CLICK ME</div>;
}
}
export default Test;
You need to use bind() call to make it work.
constructor(props) {
super(props);
this.variable = "works";
this.clicked = this.clicked.bind(this);
}
for more information on this checkout Handling events in React
Why you have to bind here? so this is because you are using ES6 syntax for your components, and in ES6 class methods are not bound to classes by default, and to be able to use this keyword inside your methods and make it refer to the class instance you have bind your method to the class like in this answer.
import React, { Component } from "react";
class Test extends Component {
constructor(props) {
super(props);
this.variable = "works";
}
clicked = () => {
alert(this.variable);
}
render() {
return <div onClick={this.clicked}>CLICK ME</div>;
}
}
export default Test;
You can choose not to bind but you need to be adding fat-arrow function syntax in order to make it work.
Currently using react-native and working with High Order functions. I have some presentation components that I am using and I currently have a HOC Container that handles some of the layout properties.
I now realize that I want to have multiple containers that will be different configurations of the same class. For that I made a class in a different file, however the problem is that I can't seem to pass my components to the class with the arrow function. I am pretty sure I am missing something really trivial.
Here is part of the code to understand the problem:
BaseContainer:
export default class BaseContainer extends Component {
render(){
<Wrapped/>
}
}
HOC Components (Ignore the 2 export default, these are 2 different modules):
export default RegularContainer = (Wrapped) => BaseContainer;
export default MessageContainer = (Wrapped) => class extends BaseContainer {
constructor(props){
super(props);
this._borderStyle = 'containerLeftBorder';
}
}
The error I am getting is "Can't find variable: Wrapped" in BaseContainer, which is understandable but I cannot figure out how to pass the Wrapped variable when the class is in another module.
This was working fine if I define the content of the BaseContainer class in the same file.
Well, I "solved" it but it seems a little ugly. I'd love to hear some feedback. Otherwise I'll close this as the answer:
export default RegularContainer = (Component) => class extends BaseContainer {
constructor(props){
super(props);
this._Wrapped = Component;
}
}
export default MessageContainer = (Component) => class extends BaseContainer {
constructor(props){
super(props);
this._borderStyle = 'containerLeftBorder';
this._Wrapped = Component;
}
}
All I want to do is to add componentDidMount() method to original component. I don't want to change anything else in it. How do I extend it?
I need something like this:
import FooComponent from 'foo-component';
class MyComponent extends FooComponent {
componentDidMount() {
// my custom behavior
}
render() {
super()
}
}
module.exports = MyComponent;
You only have to rewrite the methods you want to change.
class MyComponent extends FooComponent {
componentDidMount() {
// my custom behavior
}
}
Example
For some reason the value of this is being lost in react event handler. Reading the docs I thought that react did some stuff here to make sure this was set to the correct value
The following doesn't work as I'd expect
import React from 'react';
export default class Observer extends React.Component {
handleClick() {
console.log(this); //logs undefined
}
render() {
return (
<button onClick={this.handleClick}>Click</button>
);
}
}
But this does:
import React from 'react';
export default class Observer extends React.Component {
handleClick() {
console.log(this); //logs Observer class instance
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>Click</button>
);
}
}
React and ES6 is new to me but this seems to not be the correct behaviour?
This is correct behavior for JavaScript and React if you use the new class syntax.
The autobinding feature does not apply to ES6 classes in v0.13.0.
So you'll need to use:
<button onClick={this.handleClick.bind(this)}>Click</button>
Or one of the other tricks:
export default class Observer extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
/* ... */
}
render() {
return <button onClick={this.handleClick}>Click</button>
}
}
The accepted answer is good and I've used it a lot in ES6, but I just want to add another "more modern" solution we have with ES7 (mentioned in the React component class auto-binding notes): use arrow functions as class properties, then you don't need to bind or wrap your handler anywhere.
export default class Observer extends React.Component {
handleClick = (e) => {
/* ... */
}
render() {
return <button onClick={this.handleClick}>Click</button>
}
}
This is the simplest and cleanest solution yet!
Like others have said, React doesn't autobind methods to the instance when using ES6 classes. That said, I would make habit of always using arrow functions in event handlers like: onClick={e => this.handleClick()}
Instead of: onClick={this.handleClick.bind(this)}
This because it means that you can replace the handleClick method with a spy in a test, something you can't do when you use bind.