web-dev-qa-db-de.com

Können Sie die Es6-Importalias-Syntax für React Components 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, ich muss die Button-Komponente aus einer Bibliothek importieren und auch eine Wrapper-Komponente mit demselben Namen exportieren, wobei die Funktionalität der importierten Komponente erhalten bleibt. Wenn ich es bei import { Button } from component library belasse, erhalte ich natürlich einen Fehler bei der mehrfachen Deklaration.

Irgendwelche Ideen? 

javascriptreactjsimportecmascript-6ecmascript-7
11
Jim

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 der 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, d. H. module.exports = foo. In diesem Fall können Sie folgendermaßen importieren: 

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

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

Ändern Sie Ihren Code in 

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

Keine Ahnung, warum ich den Import nicht aliasieren kann;

Als Workaround habe ich folgendes getan:

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 euch allen

1
Jim

beachten Sie, dass StyledLibrary großgeschrieben wurde und es funktioniert hat

in der ursprünglichen Frage haben Sie styledButton jedoch nicht groß geschrieben, und es hat nicht funktioniert

beide sind die erwarteten Ergebnisse mit React

sie haben also keine Problemumgehung entdeckt. Sie haben lediglich die (dokumentierte) Reaktion von Dingen entdeckt

0
steve

Versuchen Sie auf diese Weise zu importieren

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

Ich nehme an, Sie exportieren

export default StyledLibrary
0
Marcin Rakowski