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?

— Damien Leroux
quelle

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