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!
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.
i have got used to using named exports as it makes life easier for refactoring. I have just started to implement redux but it seems i can't do a named export because the connect needs to map the component.
so for example
class Something extends Component { ... }
export default connect(mapStateToProps)(Something);
Would it be possible to use a named export like "Something", i can't place the export on the class as although react continues to work - the connect is not getting exported so there is no redux state
Any ideas ?
Thanks in advance
Just assign it to a const and export that like so:
class Something extends Component { ... }
export const ConnectedSomething = connect(mapStateToProps)(Something);
Then you can import it like so:
import { ConnectedSomething } from './....'
If I'm understanding correctly, then you could export your "redux connected" component via named export as follows:
/*
Declare component class, with class name differing from named export
*/
class SomethingComponent extends Component { ... };
/*
Export redux connected HOC to external modules, via named export "Something"
*/
export const Something = connect(mapStateToProps)(SomethingComponent);
I suggest using [folder]/index.ts:
export { default as SomethingComponent } from './SomethingComponent.tsx';
[folder]/SomethingComponent.tsx:
class SomethingComponent {}
export default SomethingComponent;
AnyComponent.tsx:
import { SomethingComponent } from '[folder]';
export default class SampleClass extends Component {
}
while importing this class which of the following is correct?
import sampleClass(same as class name) from '.module1'; or
import Myclass(Some custome name) from '.module1';
Your component:-
app.js
export default class App extends Component{
//
}
While importing components You should always import as it is:-
import App from "./components/app";
Since you have added redux as a tag so I might guess you arisen this question while working with reducers, if i am not wrong(really sorry if i am wrong).In case of reducers they always return some object (state) a reducer always look like this
reducer-post.js
export default function(){
//return []
}
So while importing reducers you can use any name just like this
import AnyReducer from "./reducers/reducer-post"
Since reducers are functions here so by default they are imported from it, but in the case of components, they were the class so we need to explicitly import them by name.
Using the same name is unnecessary for default exports, but becomes necessary in case of named exports.
So it's better to always use the name defined in export.
In reference this coding pattern:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Thing from '../components/Thing';
class ThingContainer extends Component {
render() {
return <Thing {...this.props} />;
}
}
function mapStateToProps(state) {
...
}
export default connect(mapStateToProps)(ThingContainer);
So it 1) imports a component(Thing), 2) creates another component (ThingContainer which is technically not a container) class to render that first component, and lastly using connect to finally export the container.
What's the difference with skipping step 2 above, and simply using the imported component(Thing) directly to export the container?
Yeah, that file looks like it's somewhat unnecessary. The class ThingContainer component does nothing but forward props to <Thing>, which is exactly what the wrapper components generated by connect do already. So, that's useless - the file should just do export default connect(mapState)(Thing), and it would work exactly the same without the extra ThingContainer definition.
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