Können Sie die es6-Import-Alias-Syntax für React-Komponenten verwenden?

Ich versuche, etwas wie das Folgende zu tun, aber es gibt null zurück:

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

dann versuchen, es als zu rendern:

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

Der Grund ist, dass ich die importieren muss Button Komponente aus einer Bibliothek und exportieren Sie auch eine Wrapper-Komponente mit demselben Namen, die jedoch die Funktionalität der importierten Komponente beibehält. Wenn ich es belasse import { Button } from component library dann erhalte ich natürlich einen mehrfachen Deklarationsfehler.

Irgendwelche Ideen?

Ihre Syntax ist gültig. JSX ist Syntaxzucker für React.createElement(type). Solange der Typ ein gültiger React-Typ ist, kann er in JSX-„Tags“ verwendet werden. Wenn Button null ist, ist Ihr Import nicht korrekt. Vielleicht ist Button ein Standardexport aus der Komponentenbibliothek. Versuchen:

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

Die andere Möglichkeit ist, dass Ihre Bibliothek commonjs-Exporte verwendet, dh module.exports = foo. In diesem Fall können Sie folgendermaßen importieren:

import * as componentLibrary from "component-library";

Aktualisieren

Da dies eine beliebte Antwort ist, hier noch ein paar Leckerbissen:

export default Button              -> import Button from './button'
                                      const Button = require('./button').default
         
export const Button                -> import { Button } from './button'
                                      const { Button } = require('./button')
         
export { Button }                  -> import { Button } from './button'
                                      const { Button } = require('./button')
         
module.exports.Button              -> import { Button } from './button'
                                      const { Button } = require('./button')

module.exports.Button = Button     -> import { Button } from './button'
                                      const { Button } = require('./button')

module.exports = Button            -> import * as Button from './button'
                                      const Button = require('./button')

Versuchen Sie, auf diese Weise zu importieren

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

Ich nehme an, Sie exportieren

export default StyledLibrary

Vorsicht bei Groß- und Kleinschreibung. Am besten immer CamelCase.

Einer:

import Thing from "component";

Einer mit Pseudonym:

import {Thing as OtherThing} from "component";

Eine mit Alias ​​plus andere Standardwerte:

import {Thing as OtherThing}, Stuff, Fluff from "component";

Ausführlicheres Beispiel

import
{Thing as StyledButton},
{Stuff as Stuffing},
{Fluff as Fluffy},
Wool,
Cotton
from "component";

Benutzerdefinierte Komponenten müssen großgeschrieben werden
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

ändern Sie Ihren Code zu

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

Keine Ahnung, warum ich den Import nicht aliasieren kann;

Als Workaround habe ich folgendes gemacht:

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

Danke an alle

Beachten Sie, dass es funktioniert hat, als Sie StyledLibrary großgeschrieben haben

während Sie in der ursprünglichen Frage styledButton nicht großgeschrieben haben und es nicht funktioniert hat

beides sind die erwarteten Ergebnisse mit React

Sie haben also keine Problemumgehung entdeckt, Sie haben einfach die (dokumentierte) React-Methode entdeckt, um Dinge zu tun