Reactjs 基于条件匹配应用类名

基本上，我想看看评级是否符合某些标准，然后对列表中的每个星星应用某些样式。我遇到的问题是，只有

twoStar

被应用到所有stars类名称列表中。如何基于条件匹配应用类名

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>
}

---

你能试试下面更新的代码吗

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

const starColor = (props) => {
  let rows = [];
  let starClr = "";
  props.stardata.map((sta, i) => {
        if (sta.rating > 1 && sta.rating <= 1.9) {
          starClr = <div className="oneStar">{ starCluster }</div>;
        }

        if (sta.rating >=2 && sta.rating <= 2.9) {
          starClr = <div className="twoStar">{ starCluster }</div>
        }
        rows.push(<li key={i}>
            {sta.name}
            {starClr}
          </li>)
      });

 return (
   <div> 
    <ul> 
    {rows}
    </ul>
   </div>
  )
}

const星团=
常量星色=（道具）=>{
让行=[]；
让starClr=“”；
props.stardata.map（（sta，i）=>{
如果（sta.rating>1&&sta.rating=2&&sta.rating您可以使用类名
npm安装类名--保存

props.stardata.map（（sta，i）=>{
starColor=1&&f.rating=2&&f.rating
rows.push（

{sta.name}
{starColor}
）
});

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



等于

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

如果您可以添加npm包，我强烈推荐，它可以大大简化条件类名

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

示例：

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

希望对您有所帮助！
请看我今天的文章，它将帮助您解决您的问题。您还可以添加一个
props.stardata
的示例吗？谢谢大家
<div className={classNames({'danger':true},{'noDanger':false})}>
</div>

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

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

<div className="key1 key3" />

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