你可以为 React 组件使用 es6 导入别名语法吗？答案

【问题标题】：Can you use es6 import alias syntax for React Components?你可以为 React 组件使用 es6 导入别名语法吗？
【发布时间】：2025-12-22 05:40:06
【问题描述】：

我正在尝试执行以下操作，但是它返回 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 那么当然，我会得到一个多重声明错误。

有什么想法吗？

【问题讨论】：

为什么不能更改类按钮名称？
React 组件应该以大写字母开头：不要使用styledButton，而是使用StyledButton
@Ved 我正在使用 react-styleguidist 显示每个组件，并且需要将所有组件包装在组件库中。如果我更改类 Button 名称，show code 将为操场中的每个组件具有不同的名称。
正如@topheman 所说，别名应该是pascal 大小写-->AliasName

标签： javascript reactjs import ecmascript-6 ecmascript-2016

【解决方案1】：

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

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

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

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 { ButtonCore } from 'react-atlas-core'; import { ButtonStyle } from 'react-atlas-default-theme'; export const Button = CSSModules(ButtonCore, ButtonStyle, {allowMultiple: true});
不使用默认导出；所以我不知道为什么它不会返回任何东西。
我可能会重新评估您认为出了什么问题，因为该语法和您的意图是有效的。您遇到的具体错误是什么？
没有错误，一切渲染都没有错误。除了没有从库中导入的 Button 功能。

【解决方案2】：

注意大小写。最好始终使用 CamelCase。

一个：

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";

【讨论】：

【解决方案3】：

尝试以这种方式导入

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

我想你出口

export default StyledLibrary

【讨论】：

【解决方案4】：

请注意，当您大写 StyledLibrary 并且它起作用时

然而，在最初的问题中，您没有大写 styledButton 并且它不起作用

这两个都是 React 的预期结果

所以您没有发现解决方法，您只是发现了（记录在案的）React 做事方式

【讨论】：

这很有趣...也许我以前没有听懂。您能否指出要求组件为 PascalCase 的文档在哪里？我一直假设 React 想要组件名称匹配它们的文件名（因为它们是类）。

【解决方案5】：

用户定义的组件必须大写
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>

【讨论】：

【解决方案6】：

不知道为什么我无法为导入设置别名；

作为一种解决方法，我最终这样做了：

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

谢谢大家

【讨论】：