ReactJs-SyntaxError: встроенный: 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')
);

и мой traceback:

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

каждый тег будет закрыто. Кто-нибудь укажет мне место, где все началось?

6
javascript reactjs

2 ответов

вы неправильно закрываете свой список:

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

вы писали <ListComponent/> (самозакрывающийся тег без содержимого)

Также вам нужно сделать то, что говорит Кохей Таката-рендер должен иметь один корневой элемент (хотя в React 16+ вы можете вернуть массив или обернуть свои элементы в <React.Fragment>).

13

код render функции TodoComponent возвращает 2 элементов. Я думаю, это один из элементов. Пожалуйста, попробуйте вложить 2 элемента по <div> или что-то в этом роде. Вот так:

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