Первое, что я хотел бы сделать, это добавить parentId, children и order к каждому элементу. Это позволит вам перемещаться по дереву вверх или вниз независимо от того, с какого узла вы начинаете, и для обеспечения правильного порядка. parentId не требует пояснений, в то время как children, вероятно, следует назвать childrenIds, поскольку он просто содержит идентификаторы дочерних элементов в соответствующем порядке.
Затем я обычно люблю преобразовывать массив на карту, которая имеет какое-то уникальное значение, например идентификатор. Это дает вам операцию O (1), чтобы добраться до любого узла, который может быть отредактирован или удален. Мне нравится использовать Ramda для подобных вещей, но вы можете использовать любую другую утилиту или написать свою собственную.
utils. js
/**
* Convert an array to an object, using the `id` as the key.
*/
const keyById = R.indexBy(R.prop("id"));
Теперь вам нужно найти комментарии, которые находятся вверху списка или под тем, что было бы "root", если бы у вас было один. Поскольку я решил использовать parentId: null для обозначения этого, мы можем найти эти элементы верхнего уровня с помощью этого.
const getTopLevelParents = R.filter(x => !x.parentId);
С этим мы можем легко получить наши элементы верхнего уровня, чтобы начать итерацию , Это где это может быть немного сложнее. Я также использую Ramda здесь, поэтому я надеюсь, что это не слишком необычно для понимания. Суть в том, что, начиная с первого элемента в элементах topLevel, мы рекурсивно находим дочерние элементы, сортируем по «порядку», устанавливаем глубину и объединяем этот массив элементов в один массив. В результате получается нечто более линейное и правильно упорядоченное. Потому что, когда мы go сопоставляем эти данные с компонентами, нам не нужно пропускать, чтобы найти родителей и детей. Мы хотим быть в состоянии go сверху вниз, уже все это выяснили.
/**
* Converts the mapping to an array and reorders the children so they are directly adjacent with the depth set.
* @param treeMap Key value pair where the key is the ID and the value is the chapter
*/
function getTreeMapAsList(treeMap) {
const topLevel = R.compose(
getTopLevelParents,
R.values
)(treeMap);
/**
* Nest this function so it can have access to treeMap.
*/
function getTree(data, depth = 0) {
return R.reduce(
(result, curr) => {
result.push(curr);
// hasLength is a utility that just checks if the length of an
// item is greater than 0 in a way that won't blow up if something
// doesn't exist.
if (hasLength(R.prop("children", curr))) {
const children = R.compose(
R.sortBy(R.prop("order")),
R.reduce((result, id) => {
const child = R.prop(id, treeMap);
if (child) {
return R.compose(
R.append(R.__, result),
R.assoc("depth", depth + 1)
)(child);
}
return result;
}, [])
)(curr.children);
return result.concat(getTree(children, depth + 1));
}
return result;
},
[],
data
);
}
Дерево теперь правильно упорядочено, с соответствующей глубиной и сплющено в массив. Наконец, вы можете отобразить этот массив с помощью компонента комментариев.
Комментарий. js
function Comment({ data }) {
return (
<div
style={{
//It's important to default to zero here. You could also
// just do this in the data or the mapper originally.
marginLeft: `${R.propOr(0, "depth", data)}rem`
}}
>
{data.content}
</div>
);
}
Приложение. js
function App() {
// This is the map and should be stored in state somewhere.
// If it's changing a lot, you should memoize it.
const treeMap = keyById(data.comments);
// This is the array, that is now ordered with appropriate depths
// This should also be memoized.
const treeList = getTreeMapAsList(treeMap);
return (
<div>
<div>
{/* Now we just have an array to iterate over. */}
{treeList.map(item => {
return <Comment data={item} key={item.id} />;
})}
</div>
</div>
);
}
Вот рабочий пример . Удачи!