您可以为React Components使用es6导入别名语法吗? [英] Can you use es6 import alias syntax for React Components?

问题描述

我正在尝试执行以下操作，但是它返回null:

I'm trying to do something like the following, however it returns 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处，那么我会收到多个声明错误.

The reason is, I need to import the Button component from a library, and also export a wrapper component with the same name but maintaining the functionality from the imported component. If I leave it at import { Button } from component library then of course, I get a multiple declaration error.

有什么想法吗?

推荐答案

您的语法有效. JSX是React.createElement(type)的语法糖，因此只要type是有效的React类型，就可以在JSX标签"中使用它.如果Button为null，则导入不正确.也许Button是组件库的默认导出.试试:

Your syntax is valid. JSX is syntax sugar for React.createElement(type) so as long as type is a valid React type, it can be used in JSX "tags". If Button is null, your import is not correct. Maybe Button is a default export from component-library. Try:

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

另一种可能性是您的库正在使用commonjs导出，即module.exports = foo.在这种情况下，您可以这样导入:

The other possibility is your library is using commonjs exports i.e. module.exports = foo. In this case you can import like this:

import * as componentLibrary from "component-library";

这篇关于您可以为React Components使用es6导入别名语法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！