So I have a BaseComponent.jsx that I extend on many of my components. This works great.
class BaseComponent extends React.Component {
constructor(props){
super(props)
this.something = true
}
}
class OtherComponent extends BaseComponent {
constructor(props){
super(props)
console.log(this.something) // true
}
}
But now I need to use withRouter(component) from react-router which wraps your component in a higher order component and decorates your class.
So I do this:
class OtherComponent extends BaseComponent {
constructor(props){
super(props)
console.log(this.something) // undefined
}
}
export default withRouter(OtherComponent)
The problem is that now I can't access the properties from BaseComponent and those return undefined.
How can I solve this so that I can create a HoC and at the same time access the properties of the base class?
Extending React components is discouraged by the React team. Even if it works on some instances, the results are unpredictable when doing fancier things such as higher order components.
General extending component classes should be avoided, and even if used, should not be used on "smart" connected components anyway – prefer composition over inheritance for React components.
And
You cannot implement a generic HoC that extends a component for the simple reason that the HoC has to work with all three forms of React component declaration.
Source: https://github.com/reactjs/react-router/issues/3514
So the answer to my question is simply that it can't be done and I should move to composition instead of inheritance.
Related
Need to know how we are accessing the Lifecycle methods from React :
import React, { Component } from "react";
class App extends Component{
constructor() {
super();
this.state = {};
}
componentWillMount() {
//Theoretically we tell that this `componentWillMount` is dereived/extended from 'Component' Class ie, in above like `class App extends Component`
}
render() {
return (
<div>
...
</div>
);
}
};
Now the question is if you open the react source code file from here https://unpkg.com/react#18.2.0/umd/react.development.js
you do not find any abstract method like for componentWillMount
But if you open the react-dom file, https://unpkg.com/react-dom#18.2.0/umd/react-dom.development.js you can find the method, Question is Since we extent the Class with React.Component, we assume it is inside React library, not in ReactDOM, So not Clear How we are accessing the LifeCycle hooks from React library, which infact not available in that library
The magic seems to be in react-reconciler:
You can find typeof instance.componentDidMount === 'function' instances in here that seem to mark that the React fiber is in a phase where it needs to have that function called.
The function is then finally called here in ReactFiberCommitWork.
How those functions get called is more and more involved, and quite asynchronous too, likely.
Beginner question struggling with React Component implementation.
I have tried everything in the cookbook on this error but no luck.
Expected 'this' to be used by class method 'aaaa'
What is wrong with his code:
import React from 'react';
class TestStuff extends React.Component {
constructor(props) {
super(props);
this.aaaa = this.aaaa.bind(this);
}
aaaa() {
console.log('dddddd');
}
render() {
return <div>test</div>;
}
}
export default TestStuff;
The warning is just saying, I see that you have this method in this class but it's not using any properties in the class. So either make it a static method or access a class property inside the method.
https://eslint.org/docs/rules/class-methods-use-this
Is there any differences between the following two ways of defining defaultProps in React?
class ReactComp extends React.Component {}
ReactComp.defaultProps = {}
OR
class ReactComp extends React.Component {
static defaultProps = {}
}
They are no different. They both are static in nature. The first one is the Property provided by React defaultprops if you are using the ES6 class syntax and the other one is to declare the props in the ESNext way. (nothing to do with React).
You can find more info on the static keyword on MDN.
I am looking at an older React class that is written in JS. The class in JS references 'this.element' which is not something that intrinsically exists in a typescript class that extends React.Component. I'd love some direction on what 'this.element' is referencing and how to use it in the new TS Component model. TYIA
You need to define the property on the class:
class SlideDownTransition extends React.Component {
element: React.Component;
/*...*/
}
Facebook has suggested the future removal of React.createClass completely in favour of ES6 classes. I'm now beginning to go through my react.js classes and replace them with the now accepted class MyClass extends React.Component syntax. However, I don't think I'm quite there yet on some things. I have coded the following API mount and gulp doesn't seem to like this particular module when loading: Cannot find module '.components/ticker-trader' from '/.../src'.
My particular class is outlined as:
import React, { Component, PropTypes } from 'react';
class TickerTrader extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
$.get("api_url", function(data) {
this.setState(data),
});
}
render() {
return (
<div></div>
);
}
}
export default TickerTrader;
Could anyone outline where exactly this has gone wrong...I'm sure it is something simplisitic. I have attempted to fix this by using the documentation but I don't seem to be getting anywhere...
Check your file paths.
Cannot find module '.components/ticker-trader' from '/.../src'
That looks wrong.
Instead of .components/ticker-trader it more than likely should be looking for ./components/ticker-trader.