如何为React.js中的选定帖子添加Active类

Question

我正在页面上显示帖子列表。现在，当用户选择一个帖子时，我需要向其添加CSS活动样式，但此处它适用于页面上的所有帖子。尽管我有条件地应用了该类，但是并不能解决问题。有人可以告诉我我做错了什么。供您参考，找到指向codeandbox的链接。

https://codesandbox.io/s/3x36m4kkom

Answer 1

在PostItem.jsx中，您具有以下内容：

import React from "react";
import { connect } from "react-redux";
import { onSelectPost } from "../actions/index";

const PostItem = props => (
  <div
    onClick={() => props.onSelectPost(props)}
    className={!props.active ? "card" : "card border border-primary"}
    style={{ width: "24rem" }}
  >
    <div className="card-body">
      <h5 className="card-title">{props.title}</h5>
      <p className="card-text">{props.body}</p>
    </div>
  </div>
);

const mapStateToProps = state => ({
  active: state.active
});
const mapDispatchToProps = dispatch => ({
  onSelectPost: post => dispatch(onSelectPost(post))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PostItem);

您正在使用state.active中的mapStateToProps来控制CSS类。关于此状态属性，没有任何事后声明。这是一个布尔值，将对每个帖子都有影响。

如果我将您的mapStateToProps更改为以下内容：

const mapStateToProps = (state, ownProps) => ({
  active: state.selectedPost.id === ownProps.id
});

似乎可行。