您能为 React 组件使用 es6导入别名语法吗？

我尝试执行以下操作，但它返回 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，那么当然，我会得到一个多重声明错误。

有什么想法吗？

159245 次浏览
小开
最佳答案

Your syntax is valid. JSX is syntax sugar for React.createElement(type) so as long as type is a valid React type, it can be used in JSX "tags". If Button is null, your import is not correct. Maybe Button is a default export from component-library. Try:

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

The other possibility is your library is using commonjs exports i.e. module.exports = foo. In this case you can import like this:

import * as componentLibrary from "component-library";

Update

Since this is a popular answer, here a few more tidbits:

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

No idea why I am not able to alias the import;

As a work around, I ended up doing this:

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

Thanks all

小开

User-Defined Components Must Be Capitalized
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

change your code to 

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

note that when you capitalized StyledLibrary and it worked

whereas, in the original question, you did not capitalize styledButton and it did not work

both of these are the expected results with React

so you didn't discover a workaround, you simply discovered the (documented) React way of doing things

小开

Try to import this way

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

I suppose you export

export default StyledLibrary
小开

Careful with capitalisation. Best to always CamelCase.

One: 

import Thing from "component";

One with alias: 

import {Thing as OtherThing} from "component";

One with alias plus other defaults: 

import {Thing as OtherThing}, Stuff, Fluff from "component";

More detailed example

import
{Thing as StyledButton},
{Stuff as Stuffing},
{Fluff as Fluffy},
Wool,
Cotton
from "component";

提交答案