javascript - 我如何在 React 的 props 中应用 css 样式？

Question

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

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