Javascript 使用 reactjs 和 babel 导出函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44309306/
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
Exporting functions with reactjs and babel
提问by eignhpants
I have a project using reactjs, which is transpiled by babel. I use the es2015 and react transforms in my .babelrc. I am currently refactoring and in my first pass I basically did export class foofor everything I needed. A lot of these classes should really just be functions, so I am trying to rewrite them as such, but I keep getting the same error. My main application file looks somethings like this:
我有一个使用 reactjs 的项目，它是由 babel 转译的。我使用 es2015 并在我的.babelrc. 我目前正在重构，在我的第一遍中，我基本上做export class foo了我需要的一切。很多这些类应该只是函数，所以我试图重写它们，但我不断收到相同的错误。我的主应用程序文件如下所示：
import React, { Component } from 'react';
import {Foo, Bar} from './components/ui.js';
class Application extends Component {
constructor(props){
super(props);
this.state = {
object: null
}
}
componentDidMount(){
// code
}
componentDidUpdate(){
// other code
}
render(){
return(
<div>
<Foo />
<Bar />
</div>
)
}
}
module.exports = Application
And my import from ui.jsis like this:
我的导入ui.js是这样的：
import React, { Component } from 'react';
export class Foo extends Component {
constructor(props){
super(props);
}
render() {
return (
// Some JSX
)
}
}
export class Bar extends Component {
constructor(props){
super(props);
}
render() {
return (
// Some other JSX
)
}
}
When I try and change one of these exported classes to a function, for example:
当我尝试将这些导出的类之一更改为函数时，例如：
// Note: I have tried a variety of syntax such as function, const, etc...
export var Bar {
render() {
return (
// Some other JSX
)
}
}
I get the following error:
我收到以下错误：
SyntaxError: Unexpected token <line where I declare a function>
I am not sure what I am doing wrong, and my google searches are only coming up with answers to other problems.
我不确定我做错了什么，我的谷歌搜索只能找到其他问题的答案。
回答by Chris Herring
It's the same as defining the function as a variable but just adding export to the front e.g. (using ES6 syntax)
它与将函数定义为变量相同，只是在前面添加了 export eg（使用 ES6 语法）
export const render = () => (
// Some other JSX
);
or alternatively
或者
export var render = function() {
return (
// Some other JSX
);
};
回答by Arindam Roychowdhury
Exporting functions is no different than exporting class. Basic rules must be followed .
导出函数与导出类没有什么不同。必须遵守基本规则。
- Function/Class name should in CAPS
- There will be only one "export" line .
- Every function return body should have a single tag encompassing other parts. Most commonly used is a tag .
- This usually works: import App from "./App"; where App.js is my jsx file. You can do an explicit import too . : import AllApp from "./classhouse.jsx";
- Name of the js/jsx file does not matter. It can be anycase (lower, upper).
- For returning multiple functions from one file, you need to create one more function , that encompasses all other functions .
- 函数/类名应该大写
- 将只有一个“出口”线。
- 每个函数返回体都应该有一个包含其他部分的标签。最常用的是标签。
- 这通常有效：从“./App”导入应用程序；其中 App.js 是我的 jsx 文件。您也可以进行显式导入。：从“./classhouse.jsx”导入AllApp；
- js/jsx 文件的名称无关紧要。它可以是任何情况（下、上）。
- 要从一个文件返回多个函数，您需要再创建一个包含所有其他函数的函数。
See the example below showing multiple functions returned.
请参阅下面显示返回的多个函数的示例。
import React from 'react';
/* All function / class names HAS TO BE in CAPS */
var App1 = function (){
return (
<div>
<h1>
Hello World
</h1>
</div>
)
}
var App2 = function (){
return (
<div>
<h1>World Number 2 </h1>
</div>
);
}
var AllApp = function (){
return (
<div>
<App1 />
<App2 />
</div>
);
}
export default AllApp;
My index.js file:
我的 index.js 文件：
import React from 'react';
import ReactDOM from "react-dom";
import AllApp from "./classhouse.jsx"; /* Note: App name has to be in CAPS */
import App from "./App";
const jsx =
<div>
<AllApp />
<App />
</div>
ReactDOM.render(jsx, document.getElementById("root"));
回答by vijayscode
You are writing functional componentsin wrong way.
你functional components写错了。
function Welcome() {
return <h1>Hello World</h1>;
}
or
或者
const Welcome = () => {
return <p>Hello Wrold</p>
}
export default Welcome ;
ES6 doesn't allow export default const. You must declare the constant first then export it.
ES6 不允许导出默认常量。您必须先声明常量，然后再导出它。
