Javascript React组件呈现方法中的语法错误

React组件中的

render

方法如下所示：

render() {
        return <h1>Hello, {this.props.name}</h1>;
}

下面是全班同学：

export default class SearchForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ""
        };      
    }

    handleNameChange = (e) => {
        this.setState({ name: e.target.value });
    };

    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

---

这个方法非常简单，所以我看不出问题出在哪里。非常感谢您的任何见解。

您很可能会收到错误，因为上面的类属性（

handleNameChange=（e）=>{…}；

）是一个错误

如果您安装了

babel-preset-stage-2

，并将其添加到

.babelrc

中，则错误应得到解决

.babelrc

{
  "presets": [
    ["env", "react", "stage-2"]
  ]
}

---

我觉得类语法有错误，而不是JSX。你能把你的全班都安排好吗。谢谢。类属性（

handleNameChange=（e）=>{…}；

）是一个建议，因此您很可能必须使用

“预设”：[“env”，“react”，“stage-2”]

我认为您不应该在

handleNameChange

@EvanTrimboli之后使用完全有效的尾随分号，通常推荐使用。

.babelrc

中的这些预设不是已经弃用了吗？有更持久的解决方案吗？@Vidya我不确定我会用弃用这个词。巴别塔7的整个预设系统正在重做，但据我所知，巴别塔6还没有其他选择。啊，好的。谢谢。@Vidya舞台预设在巴别塔7中被弃用。另一种选择是简单地包括所有这些预设附带的插件——或者更具体地说，只包括您需要的插件。（所以在本例中，如果您只需要

babel plugin transform class properties

就可以了。）看看这个插件从一开始就已经包含了。如果我有

babel-plugin转换类属性

和

babel-preset-stage-2

并将

因素考虑在内。babelrc

预设为

package.json

，事情会再次失败。我不得不说，现代JS工程比我想象的更难。我明白为什么TypeScript、Reason和Elm如此引人注目。

export default class SearchForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ""
        };      
    }

    handleNameChange = (e) => {
        this.setState({ name: e.target.value });
    };

    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

{
  "plugins": [
    ["transform-class-properties"]
  ]
}

{
  "presets": [
    ["env", "react", "stage-2"]
  ]
}