중첩 된 맵/forEach는 작동하지 않습니다

Question

사용자/사용자 정의 등에 따라 중첩 된 하위 메뉴가있는 CMS 시스템에서 작업하고 있습니다.

이 문제를 해결하려고합니다. 반응 구성 요소 안에지도 함수를 배치하고 있습니다. 문서에 따라이 접근법은 하나의 중첩 된 맵 함수로만 작동하지만 두 번째 서브 메뉴는 렌더링하지 않아도됩니다.

render() { 
    return (
     <div className="ui dropdown item"> 
      {this.state.text} 
      <i className="dropdown icon"></i> 
      <div className="menu"> 
       {multipleOptions.split(',').map(function(option, i){ 
        option.split('@').map(function(subOption, i){ 
         return <a className="item" key={i + "random"}>{subOption}</a>; 
        }) 
       })} 
      </div> 
     </div> 
    ) 
} 

Answer 1

당신은 AlexanderT.의 대답이 정확한지 @ 첫번째 .map

{multipleOptions.split(',').map(function(option, i) { 
    return option.split('@').map(function(subOption, i) { 
    return <a className="item" key={i + "random"}>{ subOption }</a>; 
    }) 
})} 

Answer 2

내부 return를 추가해야합니다. arraow 함수를 사용하면 조금 더 멋지게 읽습니다.

{multipleOptions.split(',').map((option, i)=> 
    option.split('@').map((subOption, i)=> 
    <a className="item" key={i + "random"}>{subOption}</a>))}