你能否在React组件中使用es6导入别名语法？

Question

我正在尝试类似以下的操作，但是它返回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，那么会出现多个声明错误。

有任何想法吗？

- Magnum

---

为什么无法更改 Button 类的名称？ - Ved

React组件应以大写字母开头：不要使用styledButton，而应该使用StyledButton。 - topheman

@Ved 我正在使用 react-styleguidist 显示每个组件，并需要将所有组件包装在组件库中。如果我更改 Button 类的名称，则“显示代码”将对游乐场中的每个组件具有不同的名称。 - Magnum

正如@topheman所说，别名应该使用帕斯卡命名法，即AliasName。 - Aditya Patnaik

Answer 1

您的语法是有效的。JSX是React.createElement（type）的语法糖，只要类型是有效的React类型，它就可以在JSX“标记”中使用。如果Button为null，则您的导入不正确。也许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')

- chris

---

嗯，似乎不起作用； 按钮在库中定义为：import { ButtonStyle } from 'react-atlas-default-theme'; export const Button = CSSModules(ButtonCore, ButtonStyle, {allowMultiple: true}); ``` - Magnum

没有使用默认导出，所以我不知道为什么它不会返回任何内容。 - Magnum

我可能会重新评估你认为出了什么问题，因为那个语法和你的意图是有效的。你具体遇到了什么错误？ - chris

没有错误，一切都能够正常渲染。唯独从库中导入的“Button”功能无法使用。 - Magnum

Answer 2

尝试以这种方式导入

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

我想你出口。

export default StyledLibrary

- Marcin Rakowski

Answer 3

注意大写字母的使用。最好始终使用驼峰式大小写。

一：

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

- Harry B

Answer 4

自定义组件必须大写字母开头
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>

- user1482015

Answer 5

不知道为什么我无法使用别名导入；

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

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

感谢大家。

- Magnum

Answer 6

请注意，当您将StyledLibrary大写时，它可以正常工作

而在原始问题中，您没有将styledButton大写，因此它无法正常工作

这两种情况都是React的预期结果

因此，您并没有发现解决方法，而是发现了（已记录的）React处理事物的方式

- steve

---

有趣...也许我之前没有注意到。你能指出哪里有文档要求组件必须使用PascalCase吗？我一直以为React希望组件名称与文件名匹配（因为它们是类）。 - Magnum