Reactコンポーネントにes6インポートエイリアス構文を使用できますか？私は、次のような何かをしようとしている

Question

は、しかし、それはnullを返します：

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

はその後としてそれをレンダリングしようとする：理由がある

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

、私はButtonコンポーネントをインポートする必要があります同じ名前のラッパーコンポーネントをエクスポートしますが、インポートされたコンポーネントから機能を維持することもできます。私がそれをimport { Button } from component libraryに残しておけば、もちろん、私は複数の宣言エラーが発生します。

アイデア？

Answer 1

構文が有効です。 JSXはReact.createElement（type）の構文シュガーで、typeが有効なReact型であれば、JSXの "tags"で使用できます。 Buttonがnullの場合、インポートは正しくありません。たぶんボタンは、コンポーネントライブラリからのデフォルトのエクスポートです。試してみてください：

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

Answer 2

なぜ私がエイリアスをインポートできないのかわかりません。回避策として

、私はこれをやってしまった：

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

おかげであなたはクラスのボタン名を変更することはできませんなぜすべて