jsx태그에 대해서 질문드립니다.

React
1

현재 material-ui 라이브러리를 사용하고 있는데요, 거기에서 TreeView라는 태그를 사용해

<TreeView>
      <TreeItem>

      </TreeItem>
</TreeView>

식으로 코딩을 하고 있습니다. 그런데 저 트리아이템 사이의 괄호부분에 동적으로 추가 TreeItem태그를 넣으려고 합니다.
일종의 폴더구조를 구현중인데요, ‘topfolder.middlefolder.lastfolder.element’ 이런식으로 string이 오면 이 string을 .을 기준으로 split 하여 폴더내에 폴더식으로 가변적으로 TreeItem을 구현하려고 하는데요 (topfolder라는 TreeItem안에 middlefolder라는 TreeItem이 들어가고 그 안에 lastfolder라는 TreeItem이 들어갑니다)

제가 생각하기에 jsx 태그 안에 while문이 들어가야 할 것 같은데 아시다시피 jsx는 단순삼항자밖에 연산되지 않습니다. 또한 기존의 dom을 직접 조작하는 형태로 사용하려고 dangerouslySetInnerHTML 속성을 사용하려고 하였으나 해당 TreeItem의 속성이 하나가 아니여서 element가 하나만 있어야 하는 dangerouslySetInnerHTML에 어긋납니다. 혹시 이부분에 대해서 고언이나 도움을 주실 수 있는 분이 계실까요. 부탁드립니다.

2

자문자답합니다.
재귀구조로 해결할 수 있으며

const renderTree = (nodes) => (
<MuiTreeItem key={nodes.name} nodeId={nodes.name} label={nodes.name} value={nodes.groupPath}>
  {Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null}
</MuiTreeItem>

);

이런식으로 MuiTreeItem이라는 태그 안에 array면 한번 더 돌리고 아니면 null을 반환하여 중첩하는 식으로 구성합니다.

1개의 좋아요