Question

在此代码中，{index}是一个列表号，我想仅将样式{index}的值应用于1到3之间。我是编码的初学者，您能帮我吗？谢谢。

 _renderRankings=()=>{
  const movies= this.state.movies.map((movie, i)=>{
    console.log(movie)
      return  <L_Ranking
      title={movie.title_english}
      key={movie.id}
      genres={movie.genres}
      index={i}
      />
  })
  return movies
}

function L_Ranking({title, genres, index}){
  return (
    <div className="L_Ranking">
      <span className="L_Ranking_Number"> {index+1}</span>
      <span className="L_Ranking__Column">
        {title}
      </span>
    </div>
  )
}

Answer 1

如果索引在所需范围内，则可以创建一个空的style对象并向其中添加样式：

function L_Ranking({title, genres, index}){
  const style = {};

  if (index >= 1 && index <= 3) {
    style.backgroundColor = 'red';
  }

  return (
     <div className="L_Ranking" style={style}>
       <span className="L_Ranking_Number">{index+1}</span>
       <span className="L_Ranking__Column">
       {title}
       </span>
     </div>
   )
}

Answer 2

您可以有条件地渲染类样式-

Window->Organizer->Devices tab->Console

<span className={index >= 1 && index <= 3 ? 'L_Ranking_Number' : '' } >仅在L_Ranking_Number为包容性index时适用。

Answer 3

非常感谢您实际上不需要在此处使用JavaScript来有条件地应用css，而可以在父类上使用css nth-child选择器。

第n个子选择器采用一个公式来决定将其样式应用于哪些子代。例如，将css从第二个子对象向上应用于每个子对象，以采用以下方式构造HTML：

<div className="parent-class">
    <div />
    <div />
    <div />
</div

您可以使用此CSS

.parent-class:nth-child(n + 2) {
    background-color: papayawhip;
}

对于需要范围的情况，可以类似地在父类上使用此CSS

.parent-class:nth-child(n + 2):nth-child(-n + 4) {
    // your css
}

Here是一个很好的网站，如果您有兴趣，可以阅读有关第n个子选择器的信息。

如何在React的props中应用CSS样式？

3 个答案: