Создание вложенных списков в React

100
19 октября 2019, 00:20

Мне необходимо создать список в виде древовидной структуры. Что-то вроде:

<ul class="list"> 
  <li class="item"> 
    <span>Папка 1</span> 
  </li> 
  <li class="item"> 
    <span>Папка 2</span> 
    <ul class="list"> 
       <li class="item"> 
         <span>Подпапка 1</span> 
       </li> 
       <li class="item"> 
         <span>Подпапка 2</span> 
       </li> 
    </ul> 
  </li> 
  <li class="item">Папка 3</li> 
</ul>

Я создала массив с объектами - каждым элементом списка, элементам, у которых есть вложенность, добавила свойство filling: 'full' и свойство items с массивом из вложенных в этот элемент элементов. Вот так: 

const ServicesItems = [ 
    { 
      id: 1, 
		  text: 'Терапия', 
		  filling: 'full', 
		  items: [ 
        { 
          id: 1, 
          text: 'Подпапка 1', 
          filling: 'empty', 
        }, 
        { 
          id: 2, 
          text: 'Подпапка 2', 
          filling: 'empty', 
        }, 
		  ] 
    }, 
    { 
      id: 2, 
		  text: 'Хирургия', 
		  filling: 'empty', 
    }, 
 ]

Список первого уровня выводит компонент: 

class ServicesList extends React.Component { 
    render() { 
        const servicesListTemplate = this.props.data.map(function (item, index) { 
            return ( 
                <li className="services-list__item" key={index}> 
			      <div className={`services-list__item-title-group services-list__item-title-group--${item.filling}`}> 
				    <a href="" className="services-list__item-title">{item.text}</a> 
				  </div> 
                </li> 
            ) 
        }) 
 
        return ( 
            <ul className="services-list "> 
                {servicesListTemplate} 
            </ul> 
        ) 
    } 
}

Однако не совсем понимаю, как теперь добавить условие, что при наличии свойства item.filling=="full" внутрь li вставляется еще один такой же компонент с элементами уже из массива item.items. При этом вложенность не должна ограничиваться.

Answer 1

в итоге получилось так:

import React from "react"; 
import ReactDOM from "react-dom"; 
 
import "./styles.css"; 
 
const items = [ 
  { 
    id: 1, 
    name: "Папка 1", 
    values: [ 
      { 
        id: 2, 
        name: "Подпапка 1", 
        values: [ 
          { 
            id: 3, 
            name: "Подпапка 2" 
          }, 
          { 
            id: 4, 
            name: "Подпапка 3", 
            values: [] 
          } 
        ] 
      }, 
      { 
        id: 5, 
        name: "Папка 2", 
        values: [] 
      } 
    ] 
  } 
]; 
 
function ListItem({ item }) { 
  let children = null; 
  if (item.values && item.values.length) { 
    children = ( 
      <ul> 
        {item.values.map(i => ( 
          <ListItem item={i} key={i.id} /> 
        ))} 
      </ul> 
    ); 
  } 
 
  return ( 
    <li> 
      {item.name} 
      {children} 
    </li> 
  ); 
} 
 
function App() { 
   
} 
 
const rootElement = document.getElementById("root"); 
ReactDOM.render(<App />, rootElement);

Answer 2

Сниппет не работает, посмотрите результат на CodeSandbox

import React, { Component } from "react"; 
import ReactDOM from "react-dom"; 
import "./styles.css"; 
 
const obj = [ 
  { 
    "folders": [ 
      { 
        "name": "Папка 1", 
      }, 
      { 
        "name": "Папка 2", 
        "additionFolders": [ 
          { 
            "name": "Подпапка 1", 
          }, 
          { 
            "name": "Подпапка 2", 
          }, 
        ], 
      }, 
      { 
        "name": "Папка 3", 
      }, 
    ] 
  } 
] 
 
class App extends Component { 
  state = { 
    data: obj[0], 
  } 
 
  render() { 
    const { data } = this.state; 
    console.log(data.folders[1].additionFolders[0].name); 
 
    return ( 
      <div> 
        <ul> 
          {data.folders.map((item, index) => ( 
            <li key={index}> 
              <span>{item.name}</span> 
              {item.additionFolders ? 
                item.additionFolders.map((item_2, index_2) => ( 
                  <ul key={index_2}> 
                    <li>{item_2.name}</li> 
                  </ul> 
                )) : undefined 
              } 
            </li> 
          ))}  
        </ul> 
      </div> 
    ); 
  } 
} 
 
const rootElement = document.getElementById("root"); 
ReactDOM.render(<App />, rootElement);

READ ALSO
Как сделать что бы описанная функция выполнялось с задержкой в .5s?
javascript

Как сделать что бы описанная функция выполнялось с задержкой в .5s?

Привет есть такая функция

 114
Вывод строки по одному символу JavaScript [закрыт]
javascript

Вывод строки по одному символу JavaScript [закрыт]

подскажите, есть строка, хочу вывести ее в хтмл по буквенно, одна за одной с каким-то интервалом, разбиваю строку с помощью split(), и как теперь...

 105
Сервер ( PHP ) и клиент на Python для игры
MySQL

Сервер ( PHP ) и клиент на Python для игры

Я создал клиент игры на Python ( что-то типо кликера в консольном виде, потому-что GUI для меня темный лес ), но мне нужен сервер который будет на php и с помощью...

 135
Парсинг HTML таблицы в файл
HTML

Парсинг HTML таблицы в файл

нужна помощь с парсингом, есть сайт с множеством компаний https://wwwinvesting

 140