使用道具切换导航列表，嵌套 array/object

Question

我有两个组件正在加载一些数据。我想要的是这样输出的链接：

• 第 1 组
  linka linkb

但它正在这样做

• 第 1 组
  林卡
• 第 1 组
  链接b

我能理解这与我的地图的使用以及我返回数据的方式有关，但我不知道如何修复它并让点击处理程序为群组工作。

const navList = [
  {
    "GroupName": "group1",
    "links": [
        {"name": "link0a","id": "434"},
        {"name": "link0b","id": "342"}
    ]
},
{
    "GroupName": "group2",
    "links": [
        {"name": "link1a","id": "345"},
        {"name": "link1b","id": "908"}
    ]
  }
]

class Nav extends Component {

  constructor(props) {
    super(props);
    this.state = {
      openItem: null
    }

    this.toggleClick = this.toggleClick.bind(this);
  }

  toggleClick(item, index, event) {
    event.preventDefault()
    if (index === this.state.openItem) {
        this.setState({openItem: null})
    } else {
        this.setState({openItem: index})
    }
 }

 render() {
    return (

            <ul>
                {navList.map((section, i) => {
                    const links = section.links.map((item, index) => {
                        const isOpen = this.state && this.state.openItem === index

                        return <NavItem title={section.GroupName} children={item.name} onClick={this.toggleClick.bind(null, item, index)} open={isOpen} />
                    })

                    return links
                })}
            </ul>

    )
  }
}

class NavItem extends Component {
  render() {
    const toggleClass = this.props.open ? 'is-open' : ''
    return (
        <li>
            <h2 onClick={this.props.onClick}>{this.props.title}</h2>
            <ul className={toggleClass}>
                <li>{this.props.children}</li>
            </ul>
        </li>
    )
  }
}

export default NavItem

Answer 1

从 NavLink 中删除 {this.props.title} 并将其移动到您上面发布的 render() 函数中。否则，每次呈现 NavLink 时，都会显示标题。不要忘记也移动您的 onClick 处理程序。

这是一个基于您的 jsfiddle 的工作示例：https://jsfiddle.net/lustoykov/n21Lspm3/1/