reactJS 意外令牌，构造函数中的预期";"

Question

我在这里遵循教程，但当运行他们导入csv文件的示例代码时，我遇到了一个错误。我附上了下面的错误报告以及我的完整代码(取自他们的例子(。我在另一个线程中看到react中的构造函数需要在一个类中，所以我试图将其放入一个类，但后来我得到了一个不同的错误。

类外错误：

SyntaxError: /Users/k/reactJS/phylo_tree/src/index.js: Unexpected token, expected ";" (6:14)
const csvSource = 'https://raw.githubusercontent.com/bkrem/react-d3-tree/master/docs/examples/data/csv-example.csv';
constructor() {
^
super();

类错误：

SyntaxError: /Users/k/reactJS/phylo_tree/src/index.js: Unexpected token, expected "," (28:11)
return (
{/* <Tree /> will fill width/height of its container; in this case `#treeWrapper` */}
<div id="treeWrapper" style={{width: '50em', height: '20em'}}>
^

完整代码：

import React from 'react';
import { Tree, treeUtil } from 'react-d3-tree';

const csvSource = 'https://raw.githubusercontent.com/bkrem/react-d3-tree/master/docs/examples/data/csv-example.csv';

constructor() {
super();

this.state = {
data: undefined,
};
}

componentWillMount() {
treeUtil.parseCSV(csvSource)
.then((data) => {
this.setState({ data })
})
.catch((err) => console.error(err));
}

class MyComponent extends React.Component {
render() {
return (
{/* <Tree /> will fill width/height of its container; in this case `#treeWrapper` */}
<div id="treeWrapper" style={{width: '50em', height: '20em'}}>

<Tree data={this.state.data} />

</div>
);
}
}

Answer 1

构造函数和方法是类的一部分，因此它们必须在类内部：

class MyComponent extends React.Component {
constructor() {
// ...
}

componentWillMount() {
// ...
}

render() {
// ...
}
}