Question

我正在尝试使用react为我的测试应用程序创建left hand menu。

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

./ src / components / LeftNav.js

第10行：希望进行赋值或函数调用，而是看到一个表达式no-unused-expressions

第12行：希望进行赋值或函数调用，而是看到一个表达式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} />

该类的道具是

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

Answer 2

由于您在map中使用花括号，因此需要显式使用return。此外，您还需要将内部代码包装在另一个元素中，例如div或a React fragment（我在这里使用过），因为多个子元素必须包含在父元素中。

<ul>
  {this.props.leftNav.map((navItem) => {
    return (
      <Fragment>
        <li className="parent_wrapper">{navItem.title}</li>
        {navItem.subMenu.map((subMenuItem) => {
          return <LeftNavItem key={navItem.id} navItem={navItem.subMenu} />
        })}
      </Fragment>
    );
  })}
</ul>

或者，您也可以用括号替换那些花括号，然后隐含返回值。您仍然需要父元素tho。

<ul>
  {this.props.leftNav.map((navItem) => (
    <Fragment>
      <li className="parent_wrapper">{navItem.title}</li>
      {navItem.subMenu.map((subMenuItem) => (
        <LeftNavItem key={navItem.id} navItem={navItem.subMenu} />
      ))}
    </Fragment>
  ))}
</ul>

Answer 3

您需要从map返回值：

 {
  this.props.leftNav.map(navItem => {
    const navItems = navItem.subMenu.map(subMenuItem => {
      return <LeftNavItem key={navItem.id} navItem={navItem.subMenu} />;
    });
    return (
      <>
        <li className="parent_wrapper">{navItem.title}</li>;
        {navItems}
      </>
    );
  });
}

Answer 4

您不会从map函数返回任何内容。您可以将内容括在括号中，而不用大括号括起来。

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

Answer 5

如果您有多个要返回的组件，则将它们包装在单个HTMLElement中或使用fun isNetworkAvailable(context: Context): Boolean { (context.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager).apply { return getNetworkCapabilities(activeNetwork)?.run { when { hasTransport(NetworkCapabilities.TRANSPORT_WIFI) -> true hasTransport(NetworkCapabilities.TRANSPORT_CELLULAR) -> true hasTransport(NetworkCapabilities.TRANSPORT_ETHERNET) -> true else -> false } } ?: false } }。 https://reactjs.org/docs/fragments.html

在地图上，您总是必须返回一些东西。

还将您所有的javascript代码包装到 {}

React Fragments

React：需要一个赋值或函数调用，而是在JSX中看到一个表达式

5 个答案: