javascript - ReactJS 错误 : "Expected an assignment or function call and instead saw an expression"

Question

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

我想渲染添加标签<i class="fa fa-fw fa-user"></i>什么时候m.menuLabel等于“登录”，但出现以下错误

"Expected an assignment or function call and instead saw an expression"

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;

Answer 1

你忘了从 map 返回值

<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>