用于 React 的带有地图的条件渲染类

Question

我什至不确定我正在尝试的事情是否可行，但是就这样吧。对于初学者，我有一个对象数组，其中每个对象都有两个键：值对。第一个键是“名称”，第二个键是“流派”。

这些对象中的每一个都被映射到一个 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>

一个使用“游戏”的例子是它映射 div 并检查“this.state.game”的值。如果该值为 true，则使用“inspiration game__selected”类呈现 div，如果为 false，则只会呈现“inspiration game”。

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

{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 在 cmets 中提到的包 classnames

• https://github.com/JedWatson/classnames
• https://www.npmjs.com/package/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

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

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