I have a class extending react.component. Another class extends from this class and connects to a redux-store.
import React from 'react'
class A extends React.Component{
constructor(props){super(props); ...}
...
}
import React from 'react'
import {connect} from 'react-redux'
#connect(store=>{...})
class B extends A{
constructor(props){super(props); ...}
...
}
class C extend A{....}
Unfortunately this doesn't work. Isn't it possible to connect a class to a store without explicitly extending the React.Component?
Error:
Uncaught TypeError: Super expression must either be null or a function, not undefined
I imported class a via index.js. This didn't work, importing the file itself worked.
As Vincent Taing said, it's not a good practice what you are trying to do. Instead use a HOC ( high order component ) to handle all of your logic (handlers, etc ), connect this component with your store and return your UI component with your handler.
Related
I'm new to Rect. I'd like to ask perhaps a most basic question since I can't find the relavent documentation or a answer on Google.
Following is the first 3 lines of typical react code:
import React, { Component } from "react";
import {
Button,
Modal,
} from "reactstrap";
export default class CustomModal extends Component {
...
}
What is the connection between Bootstrap componments imported on the second line from reactstrap and the Component class in react(that is, react.Component)? Why a CustomModal subclass from react.Component instead of reactstrap.Modal? is react.Component a sort of abstract class and reactstrap.Modal concret class extending react.Component?
Basically, yes. You extend React.Component to create your own custom class-based React components. The others that you are importing are from libraries where the library author has already created the components. Note that you can also create custom function-based React components where you don't extend React.Component. I would recommend reading through the React.Component documentation.
To your question about how it relates to CustomModal, you would use Modal as a component within CustomModal. For example:
import React, { Component } from "react";
import {
Button,
Modal,
} from "reactstrap";
export default class CustomModal extends Component {
...
render() {
return <Modal />;
}
}
Note that this example is just to give you the idea of how to use an imported component in your own custom component. It is not necessarily how to use reactstrap.Modal itself.
Class extends value # is not a constructor or null
Error shows up when tried Inheriting a Parent Class which is binded with react-redux "connect" ->
Redux
const mapStateToProps=(state)=>({
.....
});
const mapDispatchToProps=(dispatch)=>{
return {
paymentOver:()=>dispatch(paymentClose()),
}
}
export {
mapStateToProps,mapDispatchToProps
}
Parent Class
import { connect } from "react-redux";
import { mapStateToProps,mapDispatchToProps } from "../../State Management/MappingStates";
Class MainContainer extends Component{
componentDidMount(){
this.props.paymentOver(); //redux action
}
}
export default connect( mapStateToProps,mapDispatchToProps )( MainContainer )
Sub Class
import MainContainer from './MainContainer';
Class Sub extends MainContainer{ //Error showing at this line- Class extends value #<Object> is not a
//constructor or null
render(){
return ......
}
}
export default Sub
Afaik, connected components are function components, so you cannot extends them.
Either way, even if it were a class component, it would be a new Component that just rendered your original class component. So neither way, you could extend this.
In general: in React, you should never extend components - even class components, but use other patterns like higher order components or composition.
Also, the whole ecosystem is shifting to function components for two years now. Unless you have a very good reason to (like maintaining a very legacy code base), you probably should not write class components any more.
That is also the recommendation of the redux style guide: use hooks (useSelector and useDispatch) and function components over connect and class components.
If you are just learning react & redux, you are probably following very outdated sources. For Redux, pleasee look at the official tutorials at https://redux.js.org/tutorials/index
The component which is external includes and external file
class NavigationBarContainer extends React.PureComponent {
render = () => <NavigationBar extraBanner={<Banner
/>} {...this.props} />
}
in my App
import NavigationBar from '../components/NavigationBar'
<NavigationBar
extraBanner />
doesn't seem to work
import NavigationBarContainer from '../components/NavigationBar'
<NavigationBarContainer {...this.props}>
doesnt seem to work either getting error below
**Invalid prop extraBanner of type boolean supplied to NavigationBar, expected a single ReactElement.**
Two possible things that are wrong here.
1) NavigationBarContainer is not being exported, thus you cannot import it.
You can fix this by making sure to export the class one of two ways -- either change the class declaration to include the export keyword
export default class NavigationBarContainer extends React.PureComponent
or add a line to the bottom of that file
export default NavigationBarContainer;
2) You are trying to import a component called NavigationBarContainer from a file called NavigationBar. If that file is called NavigationBarContainer then this will not work. Make sure that your file names are correct.
A quick summary of export vs export default and importing
export default
The default export can be given any name when imported, eg.
// components/MyComponent.js
export default class MyComponent extends React.Component {...}
// AnotherFile.js
import MyComponent from 'components/MyComponent'; // works
import WhateverName from 'components/MyComponent'; // also works
export
When you don't use the default keyword, then you're making a named export. These have to be imported directly by name, using this syntax:
// components/SmallComponents.js
export class SmallComponent1 extends React.Component {...}
export class SmallComponent2 extends React.Component {...}
// AnotherFile.js
import {SmallComponent1, SmallComponent2} from 'components/SmallComponents'; // works
import SmallComponent1 from 'components/SmallComponents' // does not work
import {WhateverName} from 'components/SmallComponents' // does not work
Hope this helps!
In react native:
How to create a component that extends another component rather than extending basic component from react
So instead of:
export default class XXX extends Component {
I need to create a Class Base
export default class XXX extends Base {
Where
export default class Base extends Component {
the whole idea is to create a Base component to use it as base class for all other components .
Yes you can, just you have to create a base component like below :-
import React, {Component} from 'react';
export default class BaseReact extends React.Component{
constructor(props){
super(props)
}
navigate=(name)=>{
const {navigate} = this.props.navigation;
navigate(name)
}
}
Import that class inside your .js file:-
import BaseReact from '/*/*/*/*/*/*/screen/BaseReact';
export default class Splash extends BaseReact{
constructor(props){
super(props)
}
}
May be help to you to achieve your goal.
Thank you.
You can do something like that, but it has some limitation. For example you can't override the parent methods. You can use props, send therm to parent component and call them in it. You can also use Higher-Order Components, add your logic to it and add render method for example to each extended component.
Yes, you can do that, just as described in your question.
However, the React community favors composition over inheritance: https://facebook.github.io/react/docs/composition-vs-inheritance.html
I'm struggling to dry up a few functions i'm using accross several of my component classes. Mixins are a no-go and I'm struggling to understand what alternative I'm supposed to use. Setting the code up as a module seems promising, but I don't understand how to package it so I can use it to extend several different class.
Say I have:
class functionsToShare {
thingToDo(){
//do a thing
}
}
export default functionsToShare;
I'm assuming in my component class I'd want something like:
import React from 'react';
import functionsToShare from 'some/path'
class SomeComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (
);
}
}
export SomeComponent
But how do I use the shared class to extend my component? If I declared it inthe class declaration likemy componenet is delcared to extend React.Component that would defeat the reusability... Is there an alternate way I should be looking at?
You can create your shared functions file as a file with several functions that you need to use, each function being exported as a named export. Like this:
export function thingToDo() {
...
}
export function getUserByEmail(email) {
...
}
Save this file as functionsToShare.js, for example.
Then in each React component class (or anywhere else) you can import that functions, just ones you need by:
import {thingToDo} from "./functionsToShare"; // import a function
thingToDo(); // call function
or all of them by:
import * as somename from "./functionsToShare"; // import all functions from that file
somename.thingToDo(); // call specific function