web-dev-qa-db-fra.com

React - Comment exporter un composant pur sans état

Comment exporter un composant purement stupide sans état?

Si j'utilise la classe cela fonctionne:

import React, { Component } from 'react';

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

Cependant, si j'utilise une fonction pure, je ne peux pas la faire fonctionner.

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

Est-ce que je manque quelque chose de base?

javascriptreactjsecmascript-6export
61
user6002037

ES6 n'autorise pas export default const. Vous devez d'abord déclarer la constante, puis l'exporter:

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

Cette contrainte existe pour éviter d'écrire export default a, b, c; qui est interdit: une seule variable peut être exportée par défaut

114
Damien Leroux

Juste comme une note de côté. Vous pourriez techniquement export default sans déclarer une variable au préalable.

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

Vous pouvez également utiliser une déclaration de fonction au lieu d'affectation:

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

Dans votre exemple, vous utilisez déjà des accolades et return, ce qui correspond apparemment à vos besoins, sans compromis.

5
Cristian

vous pouvez le faire de deux manières

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 nous utilisons default nous importons comme ceci

import ComponentA from '../shared/componentA'

si nous n'utilisons pas default nous importons comme ceci

import { ComponentA } from '../shared/componentA'
1
sravan kumar ganji