Question

我甚至不确定我的尝试是否可行但是这里有。对于初学者，我有一个对象数组，其中每个对象有两个键：值对。一个键是＆＃34; name＆＃34;，第二个键是＆＃34;流派＆＃34;。

这些对象中的每一个都使用类中的类型映射到div中，然后将其放入容器div中。我想要做的是通过其类名控制每个div的类，我通过组件的状态控制它。我的想法如下：

  constructor(props) {
super(props);

this.state = {
  fineArt: false,
  game: false,
  literature: false,
  movie: false,
  music: false,
  tv: false
}


<div className="inspiration-container">
 {inspirations.map((item) => (`${this.state}.item.genre`) ? <div className={`inspiration ${item.genre}__selected`} key={item.name}>{item.name}</div> :
     <div className={`inspiration ${item.genre}`} key={item.name}>{item.name}</div>)}
</div>

使用＆＃34;游戏＆＃34;的示例将它用于映射div，并检查＆＃34; this.state.game＆＃34;的值。如果该值为true，则使用＆＃34;灵感游戏_类选择＆＃34;来呈现div。如果它是假的，它只会渲染＆＃34;灵感游戏＆＃34;。

我知道这种事情是可能的，因为我已经将它用作：

{this.state.game ? 
            <a className="inspiration-button" onClick={this.toggleGame}><div className="game-button__selected"></div>Game</a> : 
            <a className="inspiration-button" onClick={this.toggleGame}><div className="game-button__unselected"></div>Game</a>}

我的两个思路是1）我做错了什么或2）我无法以这种方式访问状态（因为映射的工作原理）。如果我做错了什么，我认为它会在我的三元运算符的开头。我得到的当前结果是三元操作总是如此。

感谢任何帮助，感谢您阅读本文以及您可以提供的任何帮助。

Answer 1

您正在错误地访问您的州

(`${this.state}.item.genre`)

由于您尝试将对象转换为字符串，因此输出到[Object object].item.genre。

你想要做的是通过 this.state [item.genre] 访问它来访问状态中的属性

所以你的代码应该是

{ inspirations.map((item) => 
    this.state[item.genre] ? 
       <div className={`inspiration ${item.genre}__selected`} key={item.name}>
         {item.name}
       </div> :
       <div className={`inspiration ${item.genre}`} key={item.name}>
         {item.name}
       </div>
    )
}

更好的方法是使用@Bryan Downing评论中提到的 classnames 包

这将是使用类名的理想方法（尽管使用常见的类名，但要注意冲突的类名）

import classnames from 'classnames';

// render function 
{ inspirations.map((item) => 
       <div 
         className={
           classnames('inspiration', item.genre, {
             [`__selected`]: item.genre
           })
         }
         key={item.name}
       >
         {item.name}
       </div>
    )
}

// CSS 
.inspiration {
  ... // Your css
}

// If css not the same as .selected then you can do 
// .game:not(.selected)
.game { 
   // Your css
}

.game.selected {
   // Your css
}

.movie {
   // Your css
}

.movie.selected {
   // Your css
}

Answer 2

您可以有条件地仅创建className，而不是有条件地返回两个单独的元素：

{ inspirations.map( item => {
    const className = `inspiration ${item.genre}${this.state[item.genre] ? '__selected' : ''}`;
    return <div className={className} key={item.name}>
            {item.name}
        </div>
}}

带有React映射的条件渲染类

2 个答案: