web-dev-qa-db-ja.com

Reactコンポーネントにes6インポートエイリアス構文を使用できますか？

私は次のようなことをしようとしていますが、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のままにしておくと、複数宣言エラーが発生します。

何か案は？

javascriptreactjsimportecmascript-6ecmascript-7
23
Jim

構文は有効です。 JSXはReact.createElement（type）の構文シュガーであるため、typeが有効なReact typeである限り、JSXの「タグ」で使用できます。Buttonがnullの場合、インポートはそうではありませんたぶん、ボタンはコンポーネントライブラリからのデフォルトのエクスポートかもしれません。

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

他の可能性は、ライブラリがcommonjsエクスポートを使用していることです。つまり、module.exports = foo。この場合、次のようにインポートできます。

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

この方法でインポートしてみてください

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

エクスポートするとします

export default StyledLibrary
8
Marcin Rakowski

インポートをエイリアスできない理由がわかりません。

回避策として、私はこれを行うことになりました：

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

皆さんありがとう

2
Jim

ユーザー定義のコンポーネントは大文字にする必要があります
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

コードを変更します

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

styledLibraryを大文字にしたときに機能したことに注意してください

一方、元の質問では、styledButtonを大文字にしなかったため機能しませんでした

これらは両方とも、Reactで期待される結果です

回避策を見つけられなかったので、（文書化された）React物事のやり方

0
steve