Javascript 你可以为 React 组件使用 es6 导入别名语法吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43172750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you use es6 import alias syntax for React Components?
提问by Jim
I'm trying to do something like the following, however it returns null:
我正在尝试执行以下操作，但它返回 null：
import { Button as styledButton } from 'component-library'
then attempting to render it as:
然后尝试将其呈现为：
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>
)
}
}
The reason is, I need to import the Buttoncomponent from a library, and also export a wrapper component with the same name but maintaining the functionality from the imported component. If I leave it at import { Button } from component librarythen of course, I get a multiple declaration error.
原因是，我需要Button从库中导入组件，还需要导出具有相同名称的包装器组件，但要保持导入组件的功能。import { Button } from component library当然，如果我把它留在那个时候，我会得到一个多重声明错误。
Any ideas?
有任何想法吗？
回答by chris
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:
您的语法有效。JSX 是 React.createElement(type) 的语法糖，所以只要 type 是有效的 React 类型，它就可以在 JSX “标签”中使用。如果 Button 为空，则您的导入不正确。也许 Button 是组件库的默认导出。尝试：
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:
另一种可能性是您的库使用的是 commonjs 导出，即module.exports = foo. 在这种情况下，您可以像这样导入：
import * as componentLibrary from "component-library";
回答by Marcin Rakowski
Try to import this way
尝试以这种方式导入
import {default as StyledLibrary} from 'component-library';
I suppose you export
我想你出口
export default StyledLibrary
回答by Jim
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
谢谢大家
回答by Jim
User-Defined Components Must Be Capitalized
https://reactjs.org/docs/jsx-in-depth.html#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>
回答by Harry B
Careful with capitalisation. Best to always CamelCase.
小心大小写。最好始终使用 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";
回答by steve
note that when you capitalized StyledLibrary and it worked
请注意，当您将 StyledLibrary 大写并且它起作用时
whereas, in the original question, you did not capitalize styledButton and it did not work
而在最初的问题中，您没有将 styledButton 大写并且它不起作用
both of these are the expected results with React
这两个都是 React 的预期结果
so you didn't discover a workaround, you simply discovered the (documented) React way of doing things
所以你没有发现解决方法，你只是发现了（记录在案的）React 做事方式
