ReactJS 错误：“期望一个赋值或函数调用，而是看到一个表达式”答案

【问题标题】：ReactJS error: "Expected an assignment or function call and instead saw an expression"ReactJS 错误：“期望一个赋值或函数调用，而是看到一个表达式”
【发布时间】：2020-03-21 22:44:39
【问题描述】：

我有下面的菜单组件，我试图在下面的 Map 函数中重构它

我想在m.menuLabel 等于“登录”时添加标签<i class="fa fa-fw fa-user"></i>，但我遇到错误

“期待一个赋值或函数调用，但看到了一个表达式”

import React from 'react';
import { Link } from 'react-router-dom';

const MENUDATA = [
    { menuLink: "/", menuLabel: "Home" },
    { menuLink: "/products", menuLabel: "Products" },
    { menuLink: "/test", menuLabel: "404" },
    { menuLink: "/login", menuLabel: "Login" }
];

function Menu(props) {
    return (
        <nav class="navbar bg-faded">
            <div class="container">
                <ul class="navbar-nav mr-auto">

                    {MENUDATA.map(m => {

                        if (m.menuLabel == "Login") {
                            <li class="nav-item active" key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    <i class="fa fa-fw fa-user"></i>
                                    {m.menuLabel}
                                </Link>
                            </li>
                        }
                        else {
                            <li class="nav-item active" key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    {m.menuLabel}
                                </Link>
                            </li>
                        }

                    })}
                </ul>
            </div>
        </nav>
    );
}

export default Menu;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你忘记从地图返回值

<ul class="navbar-nav mr-auto">
   {MENUDATA.map(m => {

        if (m.menuLabel == "Login") {
            return <li class="nav-item active" key={m.menuLabel}>
                <Link class="nav-link" to={m.menuLink}>
                    <i class="fa fa-fw fa-user"></i>
                    {m.menuLabel}
                </Link>
            </li>
        }
        else {
            return <li class="nav-item active" key={m.menuLabel}>
                <Link class="nav-link" to={m.menuLink}>
                    {m.menuLabel}
                </Link>
            </li>
        }

    })}
</ul>

【讨论】：

【解决方案2】：

你应该用 map 方法返回一个 jsx 元素：

import React from 'react';
import { Link } from 'react-router-dom';

const MENUDATA = [
    { menuLink: "/", menuLabel: "Home" },
    { menuLink: "/products", menuLabel: "Products" },
    { menuLink: "/test", menuLabel: "404" },
    { menuLink: "/login", menuLabel: "Login" }
];

function Menu(props) {
    return (
        <nav class="navbar bg-faded">
            <div class="container">
                <ul class="navbar-nav mr-auto">

                    {MENUDATA.map(m => {

                        return(m.menuLabel == "Login"?(<li class="nav-item active" 
                                 key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    <i class="fa fa-fw fa-user"></i>
                                    {m.menuLabel}
                                </Link>
                            </li>)

                         :(<li class="nav-item active" key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    {m.menuLabel}
                                </Link>
                            </li>))
                        }

                    )}
                </ul>
            </div>
        </nav>
    );
}

export default Menu;

【讨论】：