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

小编典典

您可以为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