Question

我试图渲染嵌套条件，一个案例会让我使用.map()

renderClasses () {
        if (!this.state.classes.length) {
            console.log(this.state.userType)
            if (this.state.userType) return(<div>Add Class</div>)
            else return (<div>Join Class</div>)
        } else {
            return (<div>{
                this.state.classes.map((class) => {
                                             ^ unexpected token here 
                    <div>one class</div>
                })
            }</div>)
        }
    }

    render() {
        if (!this.state.isLogged) {
            return <Redirect to='/' />
        }
        return (
            <div>
                {
                    this.renderClasses()
                }
            </div>
        );
    }

我错过了什么吗？我尝试将所有内容整理成一个<div>或者我理解错了？提前谢谢

Answer 1

你没有退货：

Auth::user()->name

尝试粘贴this.state.classes.map((item) => { <div>one class</div> })语句

return

但错误是由this.state.classes.map((item) => { return <div>one class</div> })是保留关键字造成的，请尝试将其命名为class。

Answer 2

如果您在{}功能中使用map，则还需要使用return。如果它只是一个语句，则忽略{}。你可以用这个 -

this.state.classes.map(class => <div>one class</div>)

Answer 3

您应该尝试从地图返回：

renderClasses () {
        if (!this.state.classes.length) {
            console.log(this.state.userType)
            if (this.state.userType) return(<div>Add Class</div>)
            else return (<div>Join Class</div>)
        } else {
            return (<div>{
                this.state.classes.map((class, index) => {
                    return (<div key={index}>one {class}</div>)
                })
            }</div>)
        }
    }

    render() {
        if (!this.state.isLogged) {
            return <Redirect to='/' />
        }
        return (
            <div>
                {
                    this.renderClasses()
                }
            </div>
        );
    }

React JS嵌套条件，.map（）上的意外错误

3 个答案: