Javascript ReactJs-SyntaxError:embedded:Unterminated JSX内容

我是ReactJs的新手，我想我有一个愚蠢的问题，但我看不出原因所在。 我的培训代码：

var ListComponent = React.createClass({
    render: function() {
        return (
            <li>{this.props.value}</li>
        );
    }
});

var TodoComponent = React.createClass({
    getInitialState: function() {
        return {
            listPoints: []
        }
    },
    addListPoint: function(event) {
        if (event.target.value !== '') {
            this.setState({
                listPoints: this.state.listPoints.push(event.target.value)
            });
        }
    },
    render: function() {
        var listPoints = [];
        for (var i=0; i<this.state.listPoints.length; i++) {
            listPoints.push(
                <ListComponent>{this.state.listPoints[i]}<ListComponent/>
            );
        }
        return (
            <ul>{listPoints}</ul>
            <input type="text" onBlur={this.addListPoint}/>
        );
    },
});


React.render(
    <TodoComponent />,
    document.getElementById('container')
);

var ListComponent=React.createClass({
render:function（）{
返回(
{this.props.value}
);
}
});
var TodoComponent=React.createClass({
getInitialState:函数（）{
返回{
列表点：[]
}
},
addListPoint:函数（事件）{
如果（event.target.value！=''）{
这是我的国家({
listPoints:this.state.listPoints.push（event.target.value）
});
}
},
render:function（）{
var-listPoints=[]；
对于（var i=0；i 42 |），
|                      ^
43 | document.getElementById（'容器'）
44 | );
45 | 

---

每个标记似乎都已关闭。是否有人向我指出问题开始的位置？

您的

render

函数的

TodoComponent

返回2个元素。 我想这一定是一个因素。 请尝试用

或其他方式将这两个元素括起来。 像这样：

<div>
    <ul>{listPoints}</ul>
    <input type="text" onBlur={this.addListPoint}/>
</div>

{listPoints}

您没有正确关闭列表：

<ListComponent>{this.state.listPoints[i]}</ListComponent>

{this.state.listPoints[i]}

您编写了

（一个没有内容的自动关闭标签）

---

此外，您还需要按照Kohei TAKATA所说的做—render应该有一个根元素（尽管在React 16+中，您可以返回一个数组或在

中包装元素）.

不幸的是，它没有解决问题。也许，但这仍然是您代码中的问题之一。组件必须将所有内容嵌入到一个封闭的标记中。是的。现在我看到了。也感谢您。您如何将JSX转换为JS？Webpack+babel？组件中的错误也显示为React.render（）中的错误功能…不是吗？

<ListComponent>{this.state.listPoints[i]}</ListComponent>