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＆＃34; tags＆＃34;中使用。如果Button为null，则导入不正确。也许Button是组件库的默认导出。尝试：

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

另一种可能性是您的图书馆正在使用commonjs导出，即module.exports = foo。在这种情况下，您可以像这样导入：

import * as componentLibrary from "component-library";

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

尝试以这种方式导入

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

我想你要出口

export default StyledLibrary

Answer 5

请注意，当您将StyledLibrary大写且有效时

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

这都是React的预期结果

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

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别名语法吗？

6 个答案: