React - Як експортувати чистий компонент без громадянства

80

Як я можу експортувати безглуздий компонент без громадянства?

Якщо я використовую клас, це працює:

import React, { Component } from 'react';

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

Однак якщо я використовую чисту функцію, я не можу змусити її працювати.

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

Мені не вистачає чогось основного?

— Демієн Леру
джерело

162

ES6 не дозволяє export default const. Ви повинні спочатку оголосити константу, а потім експортувати її:

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

Це обмеження існує, щоб уникнути export default a, b, c;забороненого написання : за замовчуванням можна експортувати лише одну змінну

— Демієн Леру
джерело

43

Просто як допоміжна записка. Ви можете технічно, export defaultне попередньо оголошуючи змінну.

export default () => (
  <pre>Header</pre>
)

— ура
джерело

32

Єдиним недоліком є те, що експортовані таким чином компоненти будуть виглядати як Unknownу розробницьких інструментах chrome React.

— пагорб

2

як імпортувати функцію, оголошену таким чином?

— Даніель Томпсон

4

@DanielThompson, ви можете імпортувати його так: import YourComponent from './path/to/component' Замініть шлях фактичним шляхом до компонента. Ім'я імпорту для експорту за замовчуванням може бути будь-яким, що ви хочете, я вибрав YourComponentу цьому прикладі.

— cheersjosh

11

Ви також можете використовувати оголошення функції замість призначення:

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

У вашому прикладі ви вже використовуєте фігурні дужки, і returnтому це, мабуть, відповідає вашим потребам без компромісів.

— Крістіан
джерело

Це був мій кращий підхід до Typescript. З TS, це (на жаль) корисно повернутися до constфункції підходу стрілки для оголошення типів властивостей: const MyComponent: React.FC<MyComponentProps> = () => {}.

— Тревор Робінсон,

@Trevor, справжнє запитання, я все ще роблю перші кроки з TS: чому не просто export default function MyComponent(props: MyComponentProps) {}на відміну від використання const MyComponent: React.FC<MyComponentProps> = () => {}?

— gmagno

@gmagno, якщо ви поглянете на визначення FC / FunctionComponent, то побачите, що він робить для вас ще кілька речей: 1) тип повернення ReactElement | null, 2) додає childrenвластивості, 3) додає інших членів до FC подобається propTypesі defaultProps.

— Тревор Робінсон,

9

це можна зробити двома способами

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

export default ComponentA;

Розгорніть фрагмент

2)

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

Розгорніть фрагмент

якщо ми використовуємо default ми імпортуємо так

import ComponentA from '../shared/componentA'

якщо ми не використовуємо, defaultми імпортуємо так

import { ComponentA } from '../shared/componentA'

— сраван ганджі
джерело