¿Cómo puedo exportar un componente tonto puro sin estado?
Si uso la clase 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?
ES6 no permite 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 los valores export default a, b, c; eso está prohibido: solo se puede exportar una variable por defecto
Solo como una nota al margen. Técnicamente, podría export default sin declarar primero una variable.
export default () => ( <pre>Header</pre> ) const ComponentA = props => { return <div>{props.header}</div>; }; export default ComponentA;2)
export const ComponentA = props => { return <div>{props.header}</div>; }; si usamos default para exportar, importamos así
import ComponentA from '../shared/componentA' si no usamos default para exportar, importamos así
import { ComponentA } from '../shared/componentA'