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

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

因为您在maps 中使用了花括号，所以您需要明确使用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>

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

<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 中或使用React Fragments。 https://reactjs.org/docs/fragments.html

在地图上，您总是需要返回一些东西。

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

import React, { Component } from 'react';

import LeftNavItem from './LeftNavItem';

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

                    </li>
                  )
                })}
            </ul>
        )
    }
}

export default LeftNav;