리액트 컴포넌트에 대해 es6 Import alias 구문을 사용할 수 있습니까?

리액트 컴포넌트에 대해 es6 Import alias 구문을 사용할 수 있습니까?

다음과 같은 작업을 수행하려고 하지만 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물론 다중 선언 오류가 발생합니다.

좋은 생각 있어요?

구문이 유효합니다.JSX는 React.createElement(type)의 구문설탕이므로 유형이 유효한 React 유형인 한 JSX "태그"에서 사용할 수 있습니다.버튼이 null인 경우 가져오기가 올바르지 않습니다.어쩌면 버튼이 컴포넌트 라이브러리에서 기본 내보내기일 수도 있습니다.시험:

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

또 다른 가능성은 라이브러리가 commonjs export를 사용하고 있다는 것입니다. module.exports = foo이 경우 다음과 같이 Import할 수 있습니다.

import * as componentLibrary from "component-library";

갱신하다

이것은 일반적인 대답이기 때문에, 여기 몇개의 힌트가 더 있습니다.

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

이 방법으로 Import를 시도

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

---

수출하시는군요.

export default StyledLibrary

대문자에 주의하세요.항상 Camel Case에 최적.

하나:

import Thing from "component";

에일리어스가 있는 것:

import {Thing as OtherThing} from "component";

에일리어스와 다른 기본값을 가진 것:

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

자세한 예

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

사용자 정의 구성 요소를 대문자로 표시해야 함
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>

Import 에일리어스를 지정할 수 없는 이유를 알 수 없습니다.

이 작업을 하면서, 다음과 같이 되었습니다.

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

모두 감사합니다

StyledLibrary를 대문자로 하여 동작했을 때

반면, 원래 질문에서는 styledButton을 대문자로 표시하지 않아 작동하지 않았습니다.

이 두 가지 모두 React에서 예상된 결과입니다.

즉, 회피책을 발견한 것이 아니라 (문서화된) 리액션 방식을 발견한 것입니다.

언급URL : https://stackoverflow.com/questions/43172750/can-you-use-es6-import-alias-syntax-for-react-components