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

原因是，我需要导入Button从库中导出组件，并导出具有相同名称的包装组件，但保留导入组件的功能。如果我把它留在import { Button } from component library当然，我会得到一个多重声明错误。

有任何想法吗？

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

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

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

import * as componentLibrary from "component-library";

Update

由于这是一个受欢迎的答案，这里还有一些花絮：

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