javascript - ReactJs - 语法错误 : embedded: Unterminated JSX contents

Question

我是 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')
);

还有我的回溯:

 Uncaught SyntaxError: embedded: Unterminated JSX contents (42:21)
  40 |  
  41 | React.render(
> 42 |     <TodoComponent />,
     |                      ^
  43 |     document.getElementById('container')
  44 | );
  45 | 

每个标签似乎都已关闭。有人能指出问题开始的地方吗？

Answer 1

您没有正确关闭列表:

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

您写了 <ListComponent/> (一个没有内容的自闭合标签)

此外，您还需要按照 Kohei TAKATA 所说的进行操作 - 渲染应该有一个根元素(尽管在 React 16+ 中您可以返回一个数组或将您的元素包装在 <React.Fragment> 中)。