[英]React.js Error “Adjacent JSX elements must be wrapped in an enclosing tag”
[英]Parse Error:Adjacent JSX elements must be wrapped in an enclosing tag(React.js )
我正在嘗試設置我的 React.js 應用程序,以便它顯示我的大菜單樹。
我的渲染函數的設置方式如下:
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 片段 <>...</> 嗎?
| {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.
除非將它們包裝在父元素中,否則不能映射多個元素。 為了澄清起見,您已經將<ListItemLink to='' primary={${item}} /><Divider light />
映射<ListItemLink to='' primary={${item}} /><Divider light />
而沒有將它們包裝在父元素中,這會導致錯誤。
嘗試將映射元素包含在 div 或 React.Fragment 中
<List component="div" disablePadding>
{menuSubTitele[0].map((item) => (
<React.Fragment>
<ListItemLink to='' primary={`${item}`} /><Divider light />
</React.Fragment>)
)}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.