Реагируйте - Как экспортировать чистый компонент не сохраняющий состояние

Question 1

Как я могу экспортировать чистый немой компонент не сохраняющий состояние?

Если я использую класс, это работает:

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>
}

Я пропускаю что-то основное?

Question 2

ES6 не позволяет export default const. Необходимо объявить, что константа, первая затем, экспортирует его:

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

Это ограничение существует, чтобы не писать export default a, b, c;, который запрещается: только одна переменная может быть экспортирована как значение по умолчанию

Question 3

Question 4

Так же, как примечание стороны. Вы могли технически export default, не объявляя переменную сначала.

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

Question 5

Можно также использовать объявление функции вместо присвоения:

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

В Вашем примере, Вы уже используете фигурные скобки и return, таким образом, это, по-видимому, соответствует Вашим потребностям без компромисса.

Question 6

можно сделать это двумя способами

1)

// @flow

type ComponentAProps = {
  header: string
};

const ComponentA = (props: ComponentAProps) => {
  return <div>{props.header}</div>;
};

export default ComponentA;

2)

// @flow

type ComponentAProps = {
  header: string
};

export const ComponentA = (props: ComponentAProps) => {
  return <div>{props.header}</div>;
};

, если мы используем default, мы импортируем как это

import ComponentA from '../shared/componentA'

, если мы не используем default, мы импортируем как это

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

Damien Leroux · Accepted Answer · 31 October 2019 в 13:27