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

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

2 个答案: