如何以递归方式呈现React Component

Question

我有一个组件说,List Component.List组件可以通过组件ListItem呈现项目.这可以通过下面的内容轻松实现

import React from 'react';
import ListItem from '../list-item/list-item';

class List extends React.Component {

  renderListItems() {
    return this.props.items.map(item => <ListItem item={item} />)
  }

  render(){
    return (
      <div className="list">{this.renderListItems()}</div>
    )
  }

}

和

import React from 'react';
class ListItem extends React.Component {

  render(){
    return (
      <div className="list-item">Name: {this.props.item.name}</div>
    )
  }

}

现在,在这种情况下,如果列表项可以在其中包含父子项,即一个列表项可以进一步呈现更多列表项,如何从其自身内呈现ListItem组件.以下是我正在寻找的渲染树以及我的数据状态

List
 - ListItem
  - ListItem
  - ListItem
 - ListItem
 - ListItem

编辑

我认为正确的结构将是这样的

List
 - ListItem
  - List
    - ListItem
    - ListItem
 - ListItem
 - ListItem

但它会在List和ListItem组件之间创建一个循环依赖,这会是一个问题吗？

Answer 1

您应该将渲染逻辑抽象为一个单独的方法,您可以从"render"方法递归调用它:

import List from 'somewhere';

class RecursiveItems extends React.PureComponent {
  constructListItem = (item) => {
    if (item.nestedItems) {
      return (
        <List key={item.key}>
          {item.nestedItems.map(this.constructListItem)}
        </List>
      )
    } else {
      return <ListItem key={item.key} item={item} />
    }
  }

  render() {
    const { listItems } = this.props

    return (
      <List>
        {listItems.map(this.constructListItem)}
      </List>
    )
  }
}

export default RecursiveItems

完全未经测试的代码,但它应该给出这个想法.