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

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 component library当然离开它,我会得到一个多重声明错误.

有任何想法吗？

Answer 1

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

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

另一种可能性是你的库正在使用commonjs export ie module.exports = foo.在这种情况下,您可以像这样导入:

import * as componentLibrary from "component-library";

Answer 2

尝试以这种方式导入

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

我想你出口

export default StyledLibrary

Answer 3

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

Answer 4

用户定义的组件必须大写
https://reactjs.org/docs/jsx-in-depth.html#user-define-components-must-be-capitalized

将您的代码更改为

import { Button as StyledButton } from 'component-library';
....bah...bah....bah  
<StyledButton {...this.props}></StyledButton>