小编典典

您可以为React Components使用es6导入别名语法吗?

reactjs

我正在尝试执行以下操作,但是返回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那时保留它,那么我会收到多个声明错误。

有任何想法吗?


阅读 383

收藏
2020-07-22

共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";
2020-07-22