你能为 React Components 使用 es6 import alias 语法吗？

Question

我正在尝试做类似下面的事情，但是 returns 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 那么当然，我会得到一个多重声明错误。

有什么想法吗？

Answer 1

您的语法正确。 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";

更新

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

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

Answer 2

不知道为什么我无法为导入添加别名；

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

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

谢谢大家

Answer 3

用户自定义组件必须大写
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>

Answer 4

请注意，当您将 StyledLibrary 大写时它起作用了

然而，在最初的问题中，您没有将 styledButton 大写并且它不起作用

这两个都是 React 的预期结果

所以您没有发现解决方法，您只是发现了（已记录的）React 做事方式

Answer 5

试试这样导入

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

我想你出口

export default StyledLibrary

Answer 6

注意大写。最好始终使用 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";

你能为 React Components 使用 es6 import alias 语法吗？

Can you use es6 import alias syntax for React Components?

javascript

import

ecmascript-6

reactjs

ecmascript-2016

更新