我有一个React组件,列出所有用户和他们的点数排名。我想要指定它是currentUser的哪一行。请参阅组件:
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的某些区域,比如reducer?
发布于 2017-06-27 14:40:06
您可以内联执行此操作,例如:
<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的情况下那样做。
发布于 2017-06-27 14:39:20
只需将您当前的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>
})
)}
https://stackoverflow.com/questions/44782952
复制相似问题