Question

基本上，我试图查看等级是否符合特定条件，然后将某些样式应用于列表中的每个星星。我遇到的问题是只有twoStar被应用于所有恒星className列表。如何根据条件匹配应用类名。

const starCluster = <div><FaStar /><FaStar /><FaStar /></div>

const starColor = (props) => {

  props.stardata.forEach((f, i) => {
    if (f.rating > 1 && f.rating <= 1.9) {
      return starColor = <div className="oneStar">{ starCluster }</div>
    }
    if (f.rating >=2 && f.rating <= 2.9) {
      return starColor = <div className="twoStar">{ starCluster }</div>
    }
  })

 return (
   <div> 
    <ul> 
    { 
      props.stardata.map((sta, i) => {
        return <div key={i}>
          <li >
            {sta.name}
            {starColor}
          </li>
        </div>
      }
    }
    </ul>
   </div>
}

edit：props.stardata是这种方式

[{name: "sirius", rating: 1.4}, {name: "polaris", rating: 2.4}, {name: "algol", rating: 3.6}]

Answer 1

如果可以添加npm软件包，我强烈建议使用classNames npm package，它可以大大简化条件类的名称。

您基本上可以传入一个对象，如果该值为true，则将其键添加为className。

示例：

<div className=(classNames{
  key1: true,
  key2: false,
  key3: 3 > 2,
  key4: 5 < 1
}) />

将渲染：

<div className="key1 key3" />

因为key1和key3的值在true对象中返回classNames。

您的情况：

在npm install classnames --save之后，您可以执行以下操作：

var classNames = require('classnames');

const starCluster = <div><FaStar /><FaStar /><FaStar /></div>

const starColor = (props) => (
  <div> 
    <ul> 
    { 
      props.stardata.map((sta, i) => (
        <div key={i}>
          <li>
            {sta.name}
            <div className={classNames(
              oneStar: sta.rating > 1 && sta.rating <= 1.9,
              twoStar: sta.rating >= 2 && sta.rating <= 2.9
            )}>{ starCluster }</div>
          </li>
        </div>
      );
    }
    </ul>
  </div>
);

希望有帮助！

Answer 2

您可以尝试以下更新后的代码

{{1}}

Answer 3

您可以使用类名 npm安装类名--save

props.stardata.map((sta, i) => {
 starColor = <div className={classNames({'oneStar',f.rating>1&&f.rating<=1.9}, 
 {'twoStar',f.rating>=2&&f.rating<=2.9})}></div>
 rows.push(<li key={i}>
 {sta.name}
 {starColor}
 </li>)
});

它的工作方式是必须将其传递给对象{class-U-want：condition-U-want}。它将所有class-u-want设置为className，它将完全填充条件（true）

<div className={classNames({'danger':true},{'noDanger':false})}>
</div>

等于

<div className='danger'>
</div>

根据条件匹配应用className

3 个答案: