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

发布于04月03日

我try 执行以下操作，但返回null:

import { Button as styledButton } from 'component-library'

然后try 将其渲染为:

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，那么当然，我会得到一个多重声明错误.

有什么 idea 吗？

使现代化

由于这是一个流行的答案，这里有更多的花絮:

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