Question

我正在使用react创建一个嵌套列表，其中list包含具有属性name和children的对象。例如：

{
    "data": [{
        "name": "elementName",
        "children": [{
            "name": "elementName",
            "children": []
        }, {
            "id": "2"
        }]
    }]
}

我以一种方式制作列表，只要对象具有属性children，就打印它的名字。我想根据父节点上的点击来切换子节点，但由于我正在映射同一<div>内的子节点，我正在打印父节点的name，我没有得到如何切换子节点。这是我的代码：

在当前组件的构造函数中：

this.state = {
      visibility: false,
};

我在这里呈现最终调用ListItem组件的项目：

renderChild = (mappingItem) => {
    var style;
    if (!this.state.visibility) {
       style = {display: "none"};
    }
    if(mappingItem.children){
      return (
       <div>
          <h5 onClick={this.toggle}><ListItem {...mappingItem} onChange={(e) => this.handleChange(...)}/></h5>
          <ul style={style}>
            {mappingItem.children.map(item => {
              return this.renderChild(item);
            })}
          </ul>
       </div>
      );
    }
    return null;
 }

toggle = () => {
    this.setState({visibility: !this.state.visibility});
  };

在ListItem组件中：

render() {
   return (
        <li>
          <input
            type="checkbox"
            onChange={this.props.onChange}
          />
          {this.props.name}
        </li>
      );
  }

到目前为止，当我点击父节点时，所有父节点的所有子节点都会扩展，即整个列表。当我取消选中父节点或任何其他节点时，整个列表都会崩溃。我怎样才能解决这个问题？我会很感激帮助搞清楚这一点。

Answer 1

将样式变量作为ListItem组件状态的一部分放置，并从父节点传递它。因为所有ListItem只使用一个'style / visiblity'实例，所以它们的行为类似。

早期的回答是误导我的意思是风格而不是this.toggle这是一种方法。我想说的是每个ListItem都有一个单独的样式/可见性变量实例。

创建一个codePen或其他东西，我可以做到。

切换嵌套列表中的项目会扩展/折叠整个列表

1 个答案: