React - How to export a pure stateless component

问题:

How can I export a stateless pure dumb component?

If I use class this works:

import React, { Component } from 'react';

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

However if I use a pure function I cannot get it to work.

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

Am I missing something basic?

回答1:

ES6 doesn't allow export default const. You must declare the constant first then export it:

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

This constraint exists to avoid writting export default a, b, c; that is forbidden: only one variable can be exported as default

回答2:

Just as a side note. You could technically export default without declaring a variable first.

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

回答3:

You can also use a function declaration instead of assignment:

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

In your example, you already use curly brackets and return so this is apparently matching with your needs with no compromise.

回答4:

you can do it in two ways

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

if we use default we import like this

import ComponentA from '../shared/componentA'

if we don't use default we import like this

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