Question

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

这是我尝试过的：

这是我的状态：

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，因此我的类名不会更改。

我在哪里弄错了？

Answer 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});
 }

重要的事情：在第二个变体中，您只能拥有一个部分物品

反应列表项目中的条件渲染

1 个答案: