ReactJs - SyntaxError:embedded:未终止的JSX内容

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>).