Reagieren - So exportieren Sie eine reine zustandslose Komponente

77

Wie kann ich eine zustandslose reine dumme Komponente exportieren?

Wenn ich Klasse benutze, funktioniert das:

import React, { Component } from 'react';

export default class Header extends Component {
    render(){
        return <pre>Header</pre>
    }
}

Wenn ich jedoch eine reine Funktion verwende, kann ich sie nicht zum Laufen bringen.

import React, { Component } from 'react';
export default const Header = () => {
    return <pre>Header</pre>
}

Vermisse ich etwas Grundlegendes?

javascript reactjs ecmascript-6 export Damien Leroux
quelle

Antworten:

157

ES6 erlaubt nicht export default const. Sie müssen die Konstante zuerst deklarieren und dann exportieren:

const Header = () => {
  return <pre>Header</pre>
};
export default Header;

Diese Einschränkung dient dazu export default a, b, c;, verbotenes Schreiben zu vermeiden : Standardmäßig kann nur eine Variable exportiert werden

Damien Leroux
quelle
43

Nur als Randnotiz. Sie könnten technisch export defaultohne vorher eine Variable deklarieren.

export default () => (
  <pre>Header</pre>
)
Cheersjosh
quelle
31
Der einzige Nachteil ist, dass auf diese Weise exportierte Komponenten wie Unknownin den React-Devtools von Chrome angezeigt werden.
Hillmark
1
Wie importiert man eine so deklarierte Funktion?
Daniel Thompson
4
@DanielThompson Sie können es wie folgt importieren: import YourComponent from './path/to/component' Ersetzen Sie den Pfad durch den tatsächlichen Pfad zur Komponente. Der Importname für den Standardexport kann beliebig sein. Ich habe ihn YourComponentin diesem Beispiel ausgewählt.
Cheersjosh
9

Sie können anstelle der Zuweisung auch eine Funktionsdeklaration verwenden:

export default function Header() {
    return <pre>Header</pre>
}

In Ihrem Beispiel verwenden Sie bereits geschweifte Klammern, returnsodass diese offenbar kompromisslos Ihren Anforderungen entsprechen.

Cristian
quelle
Dies war mein bevorzugter Ansatz bis Typescript. Bei TS ist es (leider) nützlich, constzum Deklarieren von Pfeiltypen zurückzukehren, um Eigenschaftstypen zu deklarieren : const MyComponent: React.FC<MyComponentProps> = () => {}.
Trevor Robinson
@ Trevor, echte Frage, ich mache immer noch meine ersten Schritte mit TS: Warum nicht einfach export default function MyComponent(props: MyComponentProps) {}im Gegensatz zu verwenden const MyComponent: React.FC<MyComponentProps> = () => {}?
Gmagno
@gmagno, wenn Sie sich die Definition von FC / FunctionComponent ansehen, werden Sie feststellen, dass sie noch einige weitere Dinge für Sie erledigt: 1) Rückgabetyp von ReactElement | null, 2) Hinzufügen childrenzu den Eigenschaften, 3) Hinzufügen anderer Mitglieder zum FC wie propTypesund defaultProps.
Trevor Robinson
7

Sie können es auf zwei Arten tun

const ComponentA = props => {
  return <div>{props.header}</div>;
};

export default ComponentA;
Erweitern Sie das Snippet

2)

export const ComponentA = props => {
  return <div>{props.header}</div>;
};
Erweitern Sie das Snippet

Wenn wir verwenden default, importieren wir so

import ComponentA from '../shared/componentA'

Wenn wir nicht verwenden default, importieren wir so

import { ComponentA } from '../shared/componentA'
Sravan Ganji
quelle