javascript - tag - Reaccionar: cómo exportar un componente puro sin estado

title of page html

Question

¿Cómo puedo exportar un componente tonto puro sin estado?

Si uso class esto funciona:

import React, { Component } from ''react'';

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

Sin embargo, si uso una función pura, no puedo hacer que funcione.

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

¿Me estoy perdiendo algo básico?

Answer 1

ES6 no permite la export default const . Primero debe declarar la constante y luego exportarla:

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

Esta restricción existe para evitar escribir export default a, b, c; eso está prohibido: solo se puede exportar una variable por defecto

Answer 2

Solo como una nota al margen. Técnicamente, podría export default sin declarar primero una variable.

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

Answer 3

También puede usar una declaración de función en lugar de asignación:

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

En su ejemplo, ya usa llaves y return por lo que aparentemente esto coincide con sus necesidades sin compromiso.

Answer 4

puedes hacerlo de dos maneras

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

si usamos por default importamos así

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

si no usamos por default importamos así

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