web-dev-qa-db-fra.com

Pouvez-vous utiliser la syntaxe alias d'importation es6 pour les composants React?

J'essaie de faire quelque chose comme ce qui suit, mais retourne null:

import { Button as styledButton } from 'component-library'

puis en essayant de le rendre comme:

import React, { PropTypes } from "react";
import cx from 'classNames';

import { Button as styledButton } from 'component-library';

export default class Button extends React.Component {
    constructor(props){
        super(props)
    }
    render() {
        return (
                <styledButton {...this.props}></styledButton>
        )
    }
}

La raison en est que je dois importer le composant Button à partir d'une bibliothèque et exporter également un composant encapsuleur portant le même nom, tout en conservant les fonctionnalités du composant importé. Si je le laisse à import { Button } from component library, bien sûr, je reçois une erreur de déclaration multiple.

Des idées? 

javascriptreactjsimportecmascript-6ecmascript-7
11
Jim

Votre syntaxe est valide. JSX est un sucre de syntaxe pour React.createElement (type). Aussi longtemps que le type est un type React valide, il peut être utilisé dans les "tags" JSX. Si Button est null, votre importation est incorrecte. Peut-être que Button est une exportation par défaut de composant-bibliothèque. Essayer:

import {default as StyledButton} from "component-library";

L’autre possibilité est que votre bibliothèque utilise les exportations commonjs, à savoir module.exports = foo. Dans ce cas, vous pouvez importer comme ceci: 

import * as componentLibrary from "component-library";
23
chris

Les composants définis par l'utilisateur doivent être capitalisés
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

changez votre code en 

import { Button as StyledButton } from 'component-library';
....bah...bah....bah  
<StyledButton {...this.props}></StyledButton>
2
Virtual Jasper

Aucune idée pourquoi je ne peux pas alias l'importation;

Comme travail, j'ai fini par faire ceci:

import React, { PropTypes } from "react";
import * as StyledLibrary from 'component-library';

export default class Button extends React.Component {
    constructor(props){
        super(props)
    }
    render() {
        return (
            <StyledLibrary.Button {...this.props}></StyledLibrary.Button>
        )
    }
}

Merci a tous

1
Jim

notez que lorsque vous avez capitalisé StyledLibrary et que cela a fonctionné

alors que, dans la question initiale, vous n'avez pas capitalisé styledButton et cela n'a pas fonctionné

les deux sont les résultats attendus avec React

vous n'avez donc pas découvert de solution de contournement, vous avez simplement découvert la manière (documentée) de réagir

0
steve

Essayez d'importer de cette façon

import {default as StyledLibrary} from 'component-library';

Je suppose que vous exportez

export default StyledLibrary
0
Marcin Rakowski