Javascript 您可以为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>
        )
    }
}

import React，{PropTypes}来自“React”；
从“类名称”导入cx；
从“组件库”导入{Button as styledButton}；
导出默认类按钮扩展React.Component{
建造师（道具）{
超级（道具）
}
render（）{
返回(
)
}
}

原因是，我需要从库中导入

按钮

组件，还需要导出一个具有相同名称但维护导入组件功能的包装器组件。如果我把它放在组件库的

import{Button}

中，当然，我会得到一个多声明错误

---

有什么想法吗

您的语法是有效的。JSX是React.createElement（type）的语法糖，所以只要type是有效的React类型，就可以在JSX“标记”中使用它。如果按钮为空，则说明您的导入不正确。可能按钮是组件库的默认导出。尝试：

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”导入{Button}
常量{Button}=require（'./按钮'）
导出{Button}->从“./Button”导入{Button}
常量{Button}=require（'./按钮'）
module.exports.Button->从“./Button”导入{Button}
常量{Button}=require（'./按钮'）
module.exports.Button=按钮->从“./Button”导入{Button}
常量{Button}=require（'./按钮'）
module.exports=按钮->将*作为按钮从“./Button”导入
常量按钮=需要（“./按钮”）

不知道为什么我不能为导入别名

作为一种变通方法，我最终做了以下几点：

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

import React，{PropTypes}来自“React”；
从“组件库”导入*作为样式库；
导出默认类按钮扩展React.Component{
建造师（道具）{
超级（道具）
}
render（）{
返回(
)
}
}

---

谢谢，所有用户定义的组件都必须大写

将代码更改为

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

从“组件库”导入{Button as StyledButton}；
……呸……呸……呸

请注意，当您将StyledLibrary大写时，它就起作用了

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

这两项都是React的预期结果

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

尝试以这种方式导入

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

---

我想你是出口的

export default StyledLibrary

---

小心资本化。最好总是这样

一:

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

---

为什么不能更改类按钮名称？React组件应该以大写字母开头：不要使用

styledButton

而是

styledButton

@Ved我正在使用React styleguidist显示每个组件，并且需要包装组件库中的所有组件。如果我更改类按钮名称，

show code

将为操场中的每个组件提供不同的名称。正如@topheman所说，别名应为pascal大小写-->aliasnamehm，似乎不起作用；按钮在库中定义为：

import{ButtonCore}来自“react atlas core”；从“默认主题”导入{ButtonStyle}；export const Button=CSSModules（ButtonCore，ButtonStyle，{allowMultiple:true}）不使用默认导出；所以我不知道为什么它不会返回任何东西。我可能会重新评估你认为哪里出了问题，因为这个语法和你的意图是有效的。您得到的错误到底是什么？没有错误，所有渲染都没有错误。除了没有从库中导入的
按钮
功能之外。这很有趣。。。也许我以前没听说过。您能指出要求组件为PascalCase的文档在哪里吗？我一直认为React需要的组件名称与它们的文件名匹配（因为它们是类）。谢谢mate的帮助！