Question

我正在尝试创建一个带有分组的下垂，我能够使用这样的静态代码实现这一点

      <li className="dropdown-submenu">
          <a tabindex="-1" href="#" className="dropdown-link">Multi Level</a>
          <ul className="dropdown-menu" id="Status">
               <li class="dropdown-item">
                   <a className="dropdown-link" href="#" id="" aria-label="">Multi Children</a>
               </li>
               <li class="dropdown-item">
                 <a className="dropdown-link" href="#" id="" aria-label="">Multi Children</a>
               </li>
</ul>
</li>

但是当我尝试使用地图向其添加更多动态值时，内部地图就不会被接受

<li className="dropdown-submenu">
 {props.DropDownData.Group.map(e =>
  <a tabindex="-1" href="#" className="dropdown-link">{e.GroupViewName}</a>
     { e.GroupViewMembers.map(x => 
         <ul className="dropdown-menu" id="Status">
            <li class="dropdown-item">
              <a className="dropdown-link" href="#" id="" aria-label="">{x.Title}</a>
            </li>
         </ul>
     )}

 )}
 </li>

这是我的数据结构

Answer 1

根据我的经验，我相信您需要返回嵌套的第二张地图...

`<li className="dropdown-submenu">
 {props.DropDownData.Group.map(e =>
  <a tabindex="-1" href="#" className="dropdown-link">{e.GroupViewName}</a>
     { return e.GroupViewMembers.map(x => 
         <ul className="dropdown-menu" id="Status">
            <li class="dropdown-item">
              <a className="dropdown-link" href="#" id="" aria-label="">{x.Title}</a>
            </li>
         </ul>
     )}

 )}
 </li>

Answer 2

地图运算符必须返回一个值，它不能返回多个JSX元素。您可以将多个元素包装在Fragment中。片段不会插入DOM中，而是会分组元素。

<li className="dropdown-submenu">
 {props.DropDownData.Group.map(e =>
  <Fragment>
    <a tabindex="-1" href="#" className="dropdown-link">{e.GroupViewName}</a>
       { e.GroupViewMembers.map(x => 
           <ul className="dropdown-menu" id="Status">
              <li class="dropdown-item">
                <a className="dropdown-link" href="#" id="" aria-label="">{x.Title}</a>   
              </li>
           </ul>
       )}
  </Fragment>
  )}
</li>

Answer 3

您可以尝试通过数组索引获取值，如下所示：

<li className="dropdown-submenu">
  {props.DropDownData.Group.map(e, i =>
  <a tabindex="-1" href="#" className="dropdown-link">{e.GroupViewName}</a>
  { DropDownData.Group[i].GroupViewMembers.map(x =>
  <ul className="dropdown-menu" id="Status">
    <li class="dropdown-item">
      <a className="dropdown-link" href="#" id="" aria-label="">{x.Title}</a>
    </li>
  </ul>
  )}

  )}
</li>

Answer 4

内部映射在语法上与您的静态代码不同。静态代码在单个ul元素内有许多标题。您的地图代码的每个标题都有一个ul和li元素。

我认为您想要更多类似的东西：

<ul className="dropdown-menu" id="Status">
{ e.GroupViewMembers.map(x => 
   <li class="dropdown-item">
      <a className="dropdown-link" href="#" id="" aria-label="">
         {x.Title}
      </a> 
   </li>
)}
</ul>

Answer 5

我从头开始，重新编码了所有内容。现在一切正常。

 <ul className="dropdown-menu multi-level" id="dropdown-main">
                            {props.DropDownData.Group.map(e =>
                                <li className="dropdown-submenu">
                                    <a tabindex="-1" href="#" className="dropdown-link">{e.GroupViewName}</a>
                                    <ul className="dropdown-menu" id="Status">

                                        {e.GroupViewMembers.map(x =>
                                            <li class="dropdown-item">
                                                <a className="dropdown-link" href="#" id="" aria-label="">{x.Title}</a>
                                            </li>
                                        )}
                                    </ul>

                                </li>

                            )}

                        </ul>

地图内的地图

5 个答案: