反应列表项中的条件渲染答案

【问题标题】：Conditional rendering in react-list items反应列表项中的条件渲染
【发布时间】：2019-12-05 22:20:55
【问题描述】：

我正在尝试在反应列表项中进行条件渲染，但它不起作用：

这是我尝试过的：

这是我的状态：

menuItems: [
        {
          title: "Home",
          partly: false,
          icon: home,
          route: '/'
        }
....
      ]

这是我在 jsx 中的列表：

render() {
    return (
{this.state.menuItems.map(item => (
             <NavLink
             className={
               item.partly
                 ? "content--item item-partly"
                 : "content--item"
             }
             onMouseEnter={() => this.showPartly(item)}
             onMouseLeave={() => this.hidePartly(item)}
             to={item.route}
           >
             <p>{item.title}</p>
           </NavLink>
          ))}
      )
}

这是我的 onMouseEnter 和 onMouseLeave 事件：

showPartly = item => {
    this.setState(prevState => {
      let item = Object.assign({}, prevState.item);  
      item.partly = true;                        
      console.log(item.partly)           
      return { item }; 
    })
}

 hidePartly = item => {
    this.setState(prevState => {
      let item = Object.assign({}, prevState.item);  
      item.partly = false;                        
      console.log(item.partly)           
      return { item }; 
    })
}

当事件起作用时，我可以在控制台上看到真假。但这对 dom 没有影响，所以我的类名不会改变。

我哪里错了？

【问题讨论】：

首先在地图内的NavLink添加一个key prop
已添加，没有任何变化
你有item & menuItems 一个单独的状态吗？发布您的完整状态。
这是我的完整状态。我没有像单独状态这样的项目
我认为问题在于您在对象内部返回了一个对象。试试这个：return {...item }

标签： javascript reactjs

【解决方案1】：

您正在设置唯一的项目，因此您的状态如下所示：

{
 menuItems: [{}, {}, {}],
 item: {}
}

我宁愿将新的menuItems 数组设置为状态，甚至在另一个字段中检查partly。

方式，修改menuItems：

showPartly = item => {
    this.setState(prevState => {
       return {
         menuItems: prevState.menuItems.map(
           current => current === item ? {...current, partly: true} : current
         ),
       };
    })
}

 hidePartly = item => {
    this.setState(prevState => {
       return {
         menuItems: prevState.menuItems.map(
           current => current === item ? {...current, partly: false} : current
         ),
       };
    })
}

以及状态下分隔字段的方式：

render() {
    return (
{this.state.menuItems.map(item => (
             <NavLink
             className={
               this.state.partly === item
                 ? "content--item item-partly"
                 : "content--item"
             }
             onMouseEnter={() => this.showPartly(item)}
             onMouseLeave={() => this.hidePartly(item)}
             to={item.route}
           >
             <p>{item.title}</p>
           </NavLink>
          ))}
      )
}
// ...

showPartly = item => {
  this.setState({partly: item});
}

 hidePartly = item => {
   this.setState({partly: null});
 }

重要的一点：在第二个变体中，你只能有一个部分项目

【讨论】：

非常感谢它的工作，我理解问题