Как добавить активный класс для выбранного сообщения в React.js - PullRequest
Новая
       3

Как добавить активный класс для выбранного сообщения в React.js

0 голосов
/ 31 января 2019

Я отображаю список сообщений на странице.Теперь, когда пользователь выбирает пост, мне нужно добавить в него активный стиль CSS, но здесь он применяется ко всем постам на странице.Хотя я применяю класс условно, но это не решает проблему.Может кто-нибудь сказать мне, где я делаю не так.Для справки найдите ссылку на коды и коробки.

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

1 Ответ

0 голосов
/ 31 января 2019

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

, похоже, он будет работать.

Edit r821j89oo

...