Question

这就是我用反应建立一个简单列表的方式：

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>

Answer 1

简单的递归将完成这项工作

尝试

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

Answer 2

不像使用递归那样优雅，但稍微容易理解。如果项目包含子项，则将子项推送到结果数组。

＆＃13;

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);

＆＃13;

ReactJS：返回多个列表元素而不包装元素

2 个答案: