Question

我正在尝试使用不同的输入数据在单独的div's中创建嵌套列表。我在打印嵌套列表时遇到问题：List 2在这里。我打印了对象的name属性，然后检查是否有childNodes打印了那些name属性，嵌套了。这是Parent类。

export default class Parent extends Component {
  render() {
    return (

    <div>
      <h4>List 1</h4>
      <ul>
        {this.props.jsonData1.map(item => {
          return <Child name={item.name}/>
        })}
      </ul>
    </div>

    <div>
      <h4>List 2</h4>
      <ul>
        {this.props.jsonData2.map(item1 => {
          return <Child name={item1.name}/>
         if(item1.childNodes){
           <ul>
           {item1.jsonData2.map(item2=>{
             return <Child name={item2.name}/>
           })}
         }</ul>
        })}
      </ul>
    </div>
    );
  }
}

我的Child课很简单。它只返回一个列表元素。

export default class Child extends Component {
  render() {
    let {name}=this.props;
    return (
      <li>{name}</li>
    );
  }
}

我希望得到一些有关我在这里做错的指导。我试图尽可能简单地保持递归，但显然我做错了。

Answer 1

你几乎就在那里，但也许这会引导你走上正轨。每当我们想要递归地执行某些操作时，我们想知道我们的基本情况是什么，以便我们不再调用该函数。所以在我的小例子中并使用你所拥有的东西。

export default class Child extends Component {
  render() {
    let {name}=this.props;
    return (
      <li>{name}</li>
    );
  }
}

我们的基本情况是，如果存在child.childNodes，那么我们想要创建一个新的<ul>元素列表。但是，如果它不存在但项目存在，那么我们只想渲染<li>。这将一直持续到没有子节点或项目为止。

export default class Parent extends Component {
  renderChild = (child) => {
    if (child.childNodes) {
      return (
        <ul>
          {child.jsonData.map(item => {
            return this.renderChild(item);
          })}
        </ul>
      ); 
    }
    else if (child.name) {
     return <Child name={child.name}/>; 
    }
    return null;
   }

  render() {
    return (
    <div>
      <h4>Nested Lists</h4>
      <ul>
        {this.renderChild(this.props.jsonData)}
      </ul>
    </div>
  );
}

Answer 2

只看一下代码的一些事情。在您的Parent类的返回中，请确保将所有内容封装在一个div中：

export default class Parent extends Component {
   render() {
      return(
         <div>
           //other code
         </div>
      );
   }
}

使用React的嵌套列表

2 个答案: