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
Related
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';
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
I'm using a ES7 React/Redux/GraphQL/React-Native snippets in VS Code and I'm not sure which "type" of export use. If export should be at the class / functional component declaration or at the end of the file.
In the code below, I have 2 class components exports and 3 functional components exports.
Which of these is reccomended?
// ****************************************
// 1. rcc
// ****************************************
import React, { Component } from 'react'
export default class myComponent extends Component {
render() {
return (
<div>
</div>
)
}
}
// ****************************************
// 2. rce
// ****************************************
import React, { Component } from 'react'
class myComponent extends Component {
render() {
return (
<div>
</div>
)
}
}
export default myComponent
// ****************************************
// 3. rfc
// ****************************************
import React from 'react'
export default function myComponent() {
return (
<div>
</div>
)
}
// ****************************************
// 4. rfce
// ****************************************
import React from 'react'
function myComponent() {
return (
<div>
</div>
)
}
export default myComponent
// ****************************************
// 5. rafc
// ****************************************
import React from 'react'
const myComponent = () => {
return (
<div>
</div>
)
}
export default myComponent
My second question is about functional components - It is better (recommended) to write a functional component as an arrow function or classical function declaration?
Thanks a lot!
Dan Abramov said in his tweet:
JS tip: no matter which export style you prefer (default or named) or
which function style you use (arrow or declaration), make sure your
functions have names! Especially important for React components to
show up named in DevTools and warnings.
And, between using rce and rcc for exporting class components: It's up to you to decide, however, as in CRA documentation rce is used:
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file
class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
With this style, you can use HOCs easily, for this example we want to warp our class component into a Higher Order Component provided by a library:
import { injectIntl} from "react-intl";
class Button extends React.Component {
render() {
const intl = this.props.intl;
const title = intl.formatMessage({
id: "button.title",
defaultMessage: "Hello!"
});
return <Button title={title}>...</Button>;
}
}
export default injectIntl(Button);
And between using the Functional components vs Class components: Please refer to the documentation, functional components are easier to write and to test, and now with React's useState hook you can use state in your functional components. For class components read React.Component documentation.
if you want to export multiple component in a file then you have to use only export ComponentName (without default).
then you can import as
import {ComponentA,ComponentB,...} from '../directory'
the other case is that you can export only one component in a file as
export default Class extends ........{} //
or
export default Class; // at the end of file
Both are same.
and you can import with any name
import Class from '../directory'
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> {
...
};
The following is giving me an error in React v16.0. The error I'm getting is:
TypeError: Cannot read property 'createElement' of undefined
import { React, Component } from 'react';
class MyComponent extends Component {
render() {
return(
<div>Hello World!</div>
);
};
};
If I change it to the following, it works.
import React from 'react';
class MyComponent extends React.Component {
// Omitted for brevity
}
I'm aware of some changes from v15.x to 16.x but I'm not clear about this one.
Your import needs to be the following: import React, { Component } from 'react';
React is your standard default export as before but Component is a named export.