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>中）。

Answer 2

render TodoComponent函数返回2个元素。我认为它必须是一个要素。请尝试按<div>或其他方式将2个元素括起来。像这样：

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

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

2 个答案: