Pouvez-vous utiliser es6 importation alias syntaxe pour Réagir Composants?

Je suis en train de faire quelque chose comme ce qui suit, cependant, elle renvoie null:

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

puis de tenter 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, j'ai besoin d'importer le Button composant à partir d'une bibliothèque, et aussi de l'exportation d'un composant wrapper avec le même nom mais le maintien de la fonctionnalité de la importées de composant. Si je les laisse à import { Button } from component library alors bien sûr, je reçois un multiple de la déclaration de l'erreur.

Des idées?

Pourquoi vous ne pouvez pas changer de classe nom de Bouton?
Réagir composant doit commencer par une lettre majuscule : ne pas utiliser styledButton mais StyledButton
Je suis l'aide de réagir-styleguidist pour afficher tous les éléments, et de la nécessité pour l'emballage de tous les composants dans la bibliothèque de composants. Si je change la classe nom de Bouton, le show code aurait des noms différents pour chaque composant de l'aire de jeux.

OriginalL'auteur Jim | 2017-04-02

  1. 31

    Votre syntaxe est valide. JSX est la syntaxe de sucre pour Réagir.createElement(type) tant et aussi longtemps que type de est valide Réagir type, il peut être utilisé dans JSX "tags". Si le Bouton est null, l'importation n'est pas correct. Peut-être que le Bouton est un défaut de l'exportation à partir de composants de la bibliothèque. Essayez:

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

    L'autre possibilité est que votre bibliothèque à l'aide de commonjs exportations, c'est à dire module.exports = foo. Dans ce cas, vous pouvez importer comme ceci: 

    import * as componentLibrary from "component-library";
    Hmm, ne semble pas fonctionner; Bouton est défini, il int bibliothèque: import { ButtonCore } from 'react-atlas-core'; import { ButtonStyle } from 'react-atlas-default-theme'; export const Button = CSSModules(ButtonCore, ButtonStyle, {allowMultiple: true});
    pas d'utilisation d'exportation par défaut; donc je n'ai AUCUNE IDÉE de pourquoi ça ne retourne rien.
    je serais probablement ré-évaluer ce que vous pensez qu'il va mal, depuis que la syntaxe et de votre intention est valide. Quel est exactement l'erreur que vous obtenez?
    Il n'y a pas d'erreur, et tout ce qui rend sans erreur. Sauf qu'il n'y a pas de Button fonctionnalité qui est importé à partir de la bibliothèque.

    OriginalL'auteur chris

  2. 2

    Aucune idée de pourquoi je ne suis pas capable de faire un alias de l'importation;

    Pour contourner ce problème, 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 à tous

    OriginalL'auteur Jim

  3. 2

    Définis Par L'Utilisateur Les Composants Doivent Être Capitalisés

    https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

    modifier votre code pour 

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

    OriginalL'auteur

  4. 2

    Essayez d'importer cette façon

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

    Je suppose que vous exportez

    export default StyledLibrary

    OriginalL'auteur Marcin Rakowski

  5. 0

    notez que lorsque vous capitalisés StyledLibrary et il a travaillé

    alors que, dans la question d'origine, vous n'avez pas capitaliser styledButton et il ne fonctionne pas

    ces deux sont les résultats attendus à Réagir

    donc, vous n'avez pas découvrir une solution de contournement, vous simplement découvert l' (documenté) Réagir de la façon de faire les choses

    C'est intéressant... Peut-être que je n'ai pas pris avant. Pourriez-vous point à l'endroit où la documentation est pour exiger que les Composants soient PascalCase? J'étais toujours sous l'hypothèse que Réagir voulais composant les noms correspondent à leurs noms de fichiers (puisqu'ils sont des classes).

    OriginalL'auteur steve