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

IT技术 javascript reactjs import ecmascript-6 ecmascript-2016
2021-05-10 07:33:36

我正在尝试执行以下操作，但它返回 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当然，如果我把它留在那个时候，我会得到一个多重声明错误。

有任何想法吗？

4个回答

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

尝试以这种方式导入

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

我想你出口

export default StyledLibrary

小心大小写。最好始终使用 CamelCase。

一： 

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

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

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

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

谢谢大家

其它你可能感兴趣的问题
上一篇如果我想安装能够在 100 °C 下运行的床位传感器，我有哪些选择？ 下一篇React Native：未设置 JAVA_HOME 并且在您的 PATH 中找不到“java”命令