首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >解析错误:相邻的JSX元素必须包装在一个封闭标记(React.js)中。

解析错误:相邻的JSX元素必须包装在一个封闭标记(React.js)中。
EN

Stack Overflow用户
提问于 2020-10-23 08:56:58
回答 2查看 521关注 0票数 1

我正在尝试设置我的React.js应用程序,以便它显示我的大菜单树。

设置我的呈现函数的方式如下所示:

代码语言:javascript
复制
    let menuTitle = ['受注数入力業務', '発注数入力業務', '各店発注数入力業務', '売仕搬入数入力業務', '実在庫数入力業務', '非定型伝票引渡し業務', '通常反品数入力業務', '雑搬入数入力業務', '発注数入力業務', '帳票出力/マスタ管理'];
    
    const menuSubTitele = new Map();

    menuSubTitele.set('受注数入力業務', ['01.受注数入力', '02.受注補正数入力', '03.チェックリスト確定', '04.受注データFD読込', '05.チェックリスト', '06.チェックリストⅡ', '07.受注データFD読込エラーリスト'])
    menuSubTitele.set('発注数入力業務', ['11.発注数入力', '12.発注数キャンセル', '13.チェックリスト', '14.チェックリストⅡ', '15.注文書出力'])
    menuSubTitele.set('各店発注数入力業務', ['51.各店発注数入力', '52.注文書出力', '53.チェックリスト'])
    menuSubTitele.set('売仕搬入数入力業務', ['21.売仕搬入数入力', '22.チェックリスト'])
    menuSubTitele.set('実在庫数入力業務', ['41.実在庫数入力', '42.チェックリスト'])
    menuSubTitele.set('非定型伝票引渡し業務', ['71.雑介入数入力', '72.非定型伝票引渡し明細出力'])
    menuSubTitele.set('通常反品数入力業務', ['31.返品数入力', '32.チェックリスト', '33.返品伝票出力', '34.チェックリストⅡ'])
    menuSubTitele.set('雑搬入数入力業務', ['81.雑搬入数入力', '82.チェックリスト'])
    menuSubTitele.set('発注数入力業務', ['61.返品数入力', '62.チェックリスト', '63.返品伝票出力', '64.チェックリストⅡ'])
    menuSubTitele.set('帳票出力/マスタ管理', ['90.帳票出力メニュー', '91.マスメ保守ニュー', '92.マスタ一覧メニュー', '93.マスタ管理メニュー'])

return ( 
       <div className='App'>
        <Drawer anchor={'left'} open={state['left']} onClose={toggleDrawer('left', false)}>      
        <List aria-label='secondary mailbox folders'  className = "leftMenu">
        {menuTitle.map((name) => (  
        <ListItem button onClick={handleClick}>{`${name}`}
         {open ? <ExpandLess /> : <ExpandMore />}
        </ListItem>
          <Collapse in={open} timeout="auto" unmountOnExit>
          <List component="div" disablePadding>
                {menuSubTitele[0].map((item) => (
                <ListItemLink to='' primary={`${item}`} /><Divider light />   
                ))}   
          </List>
          </Collapse>               
        ))}
        </List>   
        </Drawer>
   </div>);

但是在运行这个程序时,我得到了问题中的错误:

解析错误:相邻的JSX元素必须包装在一个封闭标记中。您想要JSX片段<>.吗?

代码语言:javascript
复制
  |          {open ? <ExpandLess /> : <ExpandMore />}
  |         </ListItem>
> |           <Collapse in={open} timeout="auto" unmountOnExit>
  |           ^
  |           <List component="div" disablePadding>
  |                 {menuSubTitele[0].map((item) => (
  |                 <ListItemLink to='' primary={`${item}`} /><Divider light />   ```

I understood, that my map-function in HTML was breaking JSX Parsing , but have no any idea how fix it.
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-23 09:14:55

尝试将映射的元素封装在div或React.Fragment中。

代码语言:javascript
复制
<List component="div" disablePadding>
  {menuSubTitele[0].map((item) => (
   <React.Fragment>
      <ListItemLink to='' primary={`${item}`} /><Divider light />
   </React.Fragment>)
  )}
票数 0
EN

Stack Overflow用户

发布于 2020-10-23 09:11:36

除非将多个元素包装在父元素中,否则不能映射多个元素。为了澄清,您已经在<ListItemLink to='' primary={${item}} /><Divider light />上映射了它们,而没有将它们封装在父元素中,这会导致错误。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64496968

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档