在React组件中，如何在列表上迭代时如何有条件显示样式

Question

我有一个react组件，列出了所有用户及其点排名。我想确定当前使用者哪一行。请参阅组件：

const RankingsList = ({rankings, currentUserId}) => {
  return (
      <ul className="list-group">
        {rankings.map(r =>
           <li className="list-group-item" key={r.user_id}>
             <p key={ranking.user_id}>{r.display_name} - {r.points}</p>
             <p>!{currentUserId}!</p>
           </li>
        )}
      </ul>
  );
};

对于每个排名的迭代，我都有r.user_id和currentuserid。我想做的是当r.user_id == currentuserid应用类似active的类。

我应该在API上的排名阵列或React的某些区域中进行此操作吗？

Answer 1

您可以在线进行内联行动：

<li
  className={`list-group-item ${r.user_id == currentUserId ? 'active' : ''}`}
  key={r.user_id}
>

如果您认为它太冗长，也可以在功能中提取

<li className={getClassNames(r.user_id)} key={r.user_id}>

React的好处只是JavaScript，因此您可以在没有JSX的情况下按照自己的方式做。

Answer 2

只需替换当前的map：

{rankings.map(r => {
    const active = r.user_id === currentUserId ? 'active' : '';
    return (
       <li className={`list-group-item ${active}`} key={r.user_id}>
         <p key={ranking.user_id}>{r.display_name} - {r.points}</p>
         <p>!{currentUserId}!</p>
       </li>
    })
)}