Вот как я строю простой список с помощью реакции:

render() {
    return (
        <List>
            {
                result.map((i, index) => {
                    return (
                        <List.Item>
                            { i.title }
                        </List.Item>
                    )
                })
            }
        </List>
    )
}

Но если есть дочерний массив, мне нужно, чтобы эти элементы также были добавлены в возвращаемый список.

result.map((i, index) => {
    if (i.children) {
        // return i.title and also title of children elements
    }
    return (
        <List.Item>
            { i.title }
        </List.Item>
    )
})

< Сильный > Пример

Предположим, что i выглядит так:

[
    { title: 'one' },
    { title: 'two', children: [ { title: 'foo' }, { title: 'bar' } ] }
]

Мне нужен этот результат, и мне нужно избегать оборачивания элемента div:

<List>
    <List.Item>one</List.Item>
    <List.Item>two</List.Item>
    <List.Item>foo</List.Item>
    <List.Item>bar</List.Item>
</List>
-1
user3142695 28 Май 2017 в 23:52

2 ответа

Лучший ответ

Простая рекурсия сделает работу

Пытаться

parseResult(list, isParent) {
    var result = list.map(i => {

        // If there's a child, call the function again to parse it
        if (Array.isArray(i.children)) {
            //First render parent, then all child  You need to wrap them in something
            return <div key={i.title}>
                <Label className="default-label" name={i.title} onClick={this.parentEvent} />{this.parseResult(i.children)}
            </div>
        }
        if (isParent)
            return <Label key={i.title} className="default-label" name={i.title} onClick={this.parentEvent} />
        else
            return <Label key={i.title} className="default-label" name={i.title} data-child="something" onClick={this.childEvent} />
    })

    return result
}

И в вашем методе рендеринга (изменить список с вашей переменной)

{this.parseResult(list, true)}

Также убедитесь, что вы определили childEvent() и parentEvent().

Если вы просто хотите расширить функцию свертывания, почему бы не использовать существующие библиотеки! Вот хороший ресурс https://react.rocks/tag/Expand_Collapse

2
Priyesh Kumar 28 Май 2017 в 21:48

Не так элегантно, как с использованием рекурсии, но немного легче следовать. Если элемент содержит дочерние элементы, поместите дочерние элементы в массив результатов.

const items = [
    { title: 'one'},
    { title: 'two', children: [ { title: 'foo' }, { title: 'bar' } ] },
    { title: 'three'}
];
const result = [];

for (var i = 0; i < items.length; i ++) {
  result.push(items[i].title);
  if (items[i].children) {
    for (var k = 0; k < items[i].children.length; k ++) {
      result.push(items[i].children[k].title)
    }
  }
}

console.log(result);
0
Brett DeWoody 28 Май 2017 в 21:05