javascript - react : Expected an assignment or function call and instead saw an expression in JSX

Question

我正在尝试创建 left hand menu对于我使用 React 的测试应用程序。

我在我的一个类的 JSX 中收到以下编译错误。是因为我不允许在 JSX 的 {} 脚本中放置 html 元素吗？如果是这样，如何更改才能使其正常工作？

./src/components/LeftNav.js

Line 10: Expected an assignment or function call and instead saw an expression no-unused-expressions

Line 12: Expected an assignment or function call and instead saw an expression no-unused-expressions

我遇到错误的组件如下。

import React, { Component } from 'react';

import LeftNavItem from './LeftNavItem';

class LeftNav extends Component {
    render() {
        return (
            <ul>
                {this.props.leftNav.map((navItem) => {
                    <li className="parent_wrapper">{navItem.title}</li>
                    navItem.subMenu.map((subMenuItem) => {
                        <LeftNavItem key={navItem.id} navItem={navItem.subMenu} />
                        })
                    })
                }
            </ul>
        )
    }
}

export default LeftNav;

第 10 行是

<li className="parent_wrapper">{navItem.title}</li>

第 12 行是

<LeftNavItem key={navItem.id} navItem={navItem.subMenu} />

该类的 Prop 是

leftNav: [
      {
        id: 1,
        title: 'System Admin',
        active: false,
        subMenu: [
          {
            id: 2,
            title: '',
            active: false
          },
          {
            id: 3,
            title: '',
            active: false
          },
          {
            id: 4,
            title: '',
            active: false
          },
          {
            id: 5,
            title: '',
            active: false
          },
          {
            id: 6,
            title: '',
            active: false
          },
          {
            id: 7,
            title: '',
            active: false
          },
          {
            id: 8,
            title: '',
            active: false
          },
          {
            id: 9,
            title: '',
            active: false
          }
        ]
      },
      {
        id: 10,
        title: 'Reports',
        active: false,
        subMenu: [
          {
            id: 11,
            title: 'Reports',
            active: false
          },
          {
            id: 12,
            title: 'Dashboard',
            active: true
          },
          {
            id: 13,
            title: 'Templates',
            active: false
          }
        ]

LeftNavItem类如下

import React, { Component } from 'react'

export default class LeftNavItem extends Component {
    render() {
        return (
            <li><a href="">{this.props.navItem.title}</a></li>
        )
    }
}

谢谢!

Answer 1

我认为您只是忘记从 map 返回。您可以使用 Fragment 来包装外部 map 返回。

{this.props.leftNav.map((navItem) => {
    return <React.Fragment key={navItem.id}>  //Provide key here
    <li className="parent_wrapper">{navItem.title}</li>
    {navItem.subMenu.map((subMenuItem) => {
        //Here you should use subMenuItem
        return <LeftNavItem key={subMenuItem.id} navItem={subMenuItem} />  
      })
    }
    </React.Fragment>
})}

Demo

注意:了解有关 Keyed Fragments 的更多信息