反應：意外的令牌返回

Question

我是React的新手，我有以下代碼：

render() {
        return (
            <div>
                <form>
                    <input type="text" name="texte" value={this.state.value} onChange={this.handleChange} />
                    <input type="submit" value="Valider" onClick={this.update} />
                </form>
                var list = this.state.liste.map(function(elt) {
                    return <li>{elt}</li>
                });
                <ul>{list}</ul>
            </div>
        );
    }

我有語法錯誤：

Unexpected token return <li>{elt}</li>
                 ^

我不明白為什么...謝謝您的幫助！

Answer 1

像這樣重組代碼：

render() {

var list = this.state.liste.map(function(elt) {
                    return <li>{elt}</li>
                });
        return (
            <div>
                <form>
                    <input type="text" name="texte" value={this.state.value} onChange={this.handleChange} />
                    <input type="submit" value="Valider" onClick={this.update} />
                </form>

                <ul>{list}</ul>
            </div>
        );
    }

要么

render() {
        return (
            <div>
                <form>
                    <input type="text" name="texte" value={this.state.value} onChange={this.handleChange} />
                    <input type="submit" value="Valider" onClick={this.update} />
                </form>
                <ul>{this.state.liste.map(function(elt) {
                    return <li>{elt}</li>
                });}</ul>
            </div>
        );
    }

如果沒有{}則無法在JSX語法內添加代碼