时间戳

首页 > 解决方案 > ReactJS 和 Redux。如何突出显示当前点击的元素？

reactjs - ReactJS 和 Redux。如何突出显示当前点击的元素？

问题描述

对于更改状态，我使用 redux。我有 ChapterList 组件，我在其中迭代章节列表并显示它，我也有内容组件，其中显示内容本身

在左侧我有主题列表，当我单击其中一个时，该主题的内容会显示在右侧。如何使左侧的主题也被突出显示。

在左侧我有主题列表，当我单击其中一个时，该主题的内容会显示在右侧。 如何使左侧的主题也被突出显示

我希望它像这里一样突出显示。

我希望它看起来像这里

标签： reactjsreduxreact-redux

解决方案

我假设您的主题是一个单独的组件，因此您可以将“isActive”道具传递给它，然后在渲染函数中检查“isActive”道具并添加“活动”类。

在主题组件中：

render() {
  const classes = this.props.isActive ? 'topic topic-active' : 'topic';
  return ( 
    <div className={classes} >
  ...

推荐阅读