I have it working :
export class FormAuto extends React.PureComponent {
constructor(props) {
...
}
....
}
I import the composent like this : import { FormAuto } from './FormAuto'
But I want to do it like this, to use connect from redux :
class FormAuto extends React.PureComponent {
constructor(props) {
...
}
....
}
export default connect(mapStateToProps, mapDispatchToProps)(FormAuto);
But i have this error :
Module ../../FormAuto has no exported member 'FormAuto'
If I import the composent like this : import FormAuto from './FormAuto'
the component is no longer displayed.
Can you help me ?
The problem isn't related to PureComponent. It is because you changed from a named export to a default export.
You have two options.
Use a default import
import FormAuto from './path/to/FormAuto'
Do a named export:
// Either the const or the class will need to be renamed in this scenario
export const FormAuto = connect(mapStateToProps, mapDispatchToProps)(FormAuto);
The bottom line is you need to keep them consistent.
For reference:
Default
export default MyComponent
// The import name can be anything you choose.
// For clarity it may be preferred to use the component name
import MyComponent from './MyComponent';
Named
export MyComponent
import { MyComponent } from './MyComponent';
Related
What does the export exactly do below in the declaration? When i remove it, nothing seems to change so i'm having trouble understanding it's significance.
import React, { PureComponent } from 'react'
export class PureComp extends PureComponent {
render() {
return (
<div></div>
)
}
}
export default PureComp
and
import React, { PureComponent } from 'react'
class PureComp extends PureComponent {
render() {
return (
<div></div>
)
}
}
export default PureComp
When you do
export default PureComp
you are exporting a default export, that consumers can use by doing
import PureComp from './file.js';
When you do
export class PureComp
you are exporting a named export that consumers can use by doing
import { PureComp } from './file.js';
Named exports are useful for when you want to export multiple things from the same file. Here, since you're already default exporting the class, creating a named export for the same thing probably isn't useful.
With your first code, consumers can use the named import PureComp. With your second code, there are no named exports, only a default export.
I've problem with exporting React class component and use it in Enzyme, because it's exporting as function type:
class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
...
}
export default connect(null, mapDispatchToProps)(MyComponent);
export const MyComponentRaw = MyComponent
and next, when I'm trying to use it in Enzyme:
import {MyComponentRaw} from "../../MyComponent";
const wrapper = shallow<typeof MyComponentRaw>(<MyComponentRaw />)
it's is visible as function.
On the other hand, when I exported component directly:
export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
...
}
I'm able to use it in Enzyme:
import MyComponentRaw from "../../MyComponent";
const wrapper = shallow<typeof MyComponentRaw>(<MyComponentRaw />)
You can export the class component and the default with the connect.
export class MyComponent extends React.Component {
}
export default connect(null, mapDispatchToProps)(MyComponent);
You can import the unconnected component in the tests like
import {MyComponent} from '/the/location';
And you can import the connected component using
import ConnectedMyComponent from '/the/location';
I'm trying group all components into one file, and use the file among all locations. But when I try to import Components from the file, it says Module has no exported member
The following are my code
UserActionButton.tsx:
import * as React from 'react';
class UserActionButton extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
render() {
return <div>BUTTON HERE</div>;
}
}
export default UserActionButton;
AppComponents.tsx:
import UserActionButton from './buttons/UserActionButton';
export default {
UserActionButton
};
Home.tsx:
import * as React from 'react';
import {
UserActionButton
} from '../../components/AppComponents';
class HomePage extends React.Component<any, any> {
render() {
return <div>
<h1>Hi, I’m a Home page component!</h1>
<UserActionButton></UserActionButton>
</div>;
}
}
export default HomePage;
The error was reported in Home.tsx file, please guide me how to solve this issue.
If you were going to use export default then you can remove the curly braces in import of UserActionButton in Home.tsx. AppComponents.tsx is exporting an object, though, so you should import AppComponents from '...AppComponents' and then pull out UserActionButton into a local const before use in your jsx: const UserActionButton = AppComponents.UserActionButton;
You need to remove default from here i.e AppComponents.tsx:
import UserActionButton from './buttons/UserActionButton';
export {
UserActionButton
};
in Home.tsx remove curly braces around UserActionButton in import statement
import UserActionButton from '../../components/AppComponents';
you shouldn't put curly braces when exported it as default. see this
import * as react from 'react'
import { propsModel } from '...'
...
...
class MyComponent extends React.Component<any, propsModel> {
render () {
....
}
}
can create component like this ? why i did't see this way on reactjs.org and use this way cant export default, but export fine
I have the following TypeScript (v3.01) React component named TopBar to which I'm now adding React-Redux. The TopBar component is then referenced in a parent component named Layout.
import * as React from 'react';
import { connect } from "react-redux";
import { decrementZoomLevel, incrementZoomLevel, setCenterPoint, setZoomLevel } from '../store/actions';
class TopBar extends React.Component<any, any>{
...
};
/*
* Redux-React setup
*/
const mapStateToProps = (state: any): any => {
return {
centerPoint: state.centerPoint,
zoomLevel: state.zoomLevel
}
}
export default connect(mapStateToProps)(TopBar);
However, when I reference this component in another Layout TypeScript component
import * as React from 'react';
import { TopBar } from './TopBar';
export class Layout extends React.Component<any, any> {
...
};
I get the following TypeScript error
(TS) Module: "C:/....../TopBar" has no exported member 'TopBar'.
Prior to adding the React-Redux code the class definition was
export default class TopBar extends React.Component<any, any>{
...
};
and I was able to reference the TopBar component in Layout w/ no errors.
Now that I'm adding the React-Redux connect() statement how do I properly reference TopBar in another component?
It is a default export, you have to import this way.
import * as React from 'react';
import TopBar from './TopBar';
export class Layout extends React.Component<any, any> {
...
};