javascript - 你可以为 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 组件库 中，那么我当然会收到多个声明错误。

有什么想法吗？

Answer 1

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

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