Простое изменение фонового цвета в React-Redux

Question

Я по существу закончил с одним из проекта ФКС (https://www.freecodecamp.com/challenges/build-a-camper-leaderboard)

только настройки, что я хотел бы это для пользователя, чтобы посмотреть, что таблица заказывается (либо последние или лучшие результаты).

В настоящее время у меня есть это с jQuery, чтобы изменить атрибут css-заголовка таблицы непосредственно, когда пользователь нажимает либо последний столбец, либо все время, но я не считаю, что это правильный путь.

Вот мой контейнер код, который имеет по существу самого

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux' 
import { recentData } from '../actions/index' 
import { allTimeData } from '../actions/index' 

export default class TableBoard extends Component { 
    constructor(props){ 
    super(props); 
    } 
    componentDidMount() { 
    //Is there better way to initialize the background-color??? 
    $("#col-recent").css("background-color", "lightblue"); 
    this.props.recentData() //fetch data most recent top 
    } 
    renderData(userData,index){ 
    const FCC_URL = 'https://www.freecodecamp.com/' 
    const img = userData.img 
    const name = userData.username; 
    const recent = userData.recent; 
    const allTime = userData.alltime; 
    return(
     <tr key={name}> 
     <td className="rank">{index + 1}</td> 
     <td> 
      <img className="img-responsive" 
      src={img} 
      alt='FCC profile' 
      /> <a href={FCC_URL + name}>{name}</a> 
     </td> 
     <td className="recent">{recent}</td> 
     <td className="all-time">{allTime}</td> 
     </tr> 
    ) 
    } 
    getRecentData(){ 
    $("#col-recent").css("background-color", "lightblue"); 
    $("#col-alltime").css("background-color", "#e2e2e2"); 
    this.props.recentData() 
    } 
    getAllTimeData(){ 
    $("#col-alltime").css("background-color", "lightblue"); 
    $("#col-recent").css("background-color", "#e2e2e2"); 
    this.props.allTimeData(); 
    } 
    render(){ 
    return(
     <table className="table table-hover table-striped table-bordered"> 
     <thead> 
      <tr> 
      <th className="rank">#</th> 
      <th className="username">Camper Name</th> 
      <th id='col-recent'className="recent clickable" 
       onClick={this.getRecentData.bind(this)} 
       >Points in 30 days 
      </th> 
      <th id='col-alltime' className="all-time clickable" 
       onClick={this.getAllTimeData.bind(this)} 
       >All-time Posts 
      </th> 
      </tr> 
     </thead> 
     <tbody> 
      {this.props.FCCData.map(this.renderData)} 
     </tbody> 
     </table> 
    ) 
    } 
} 
function mapStateToProps(state){ 
    return { 
    FCCData: state.collectData 
    } 
} 
function mapDispatchToProps(dispatch){ 
    return bindActionCreators({ recentData, allTimeData }, dispatch) 
} 

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

таблицу Я еще новичок в React-Redux так парадигма государства все еще ново для меня.

Answer 1

Для достижения этой цели вы можете использовать функциональные возможности React. Так вы componentDidMount() или getRecentData() и т.д., вы можете сделать это:

componentDidMount() { 
    this.setState({ bgColorRecent: 'lightblue' }); 
} 

Тогда в визуализации вы реагировать на состояние с РЕАКТ функциональность встроенных стилей:

render() { 
    const recentStyles = { 
     backgroundColor: this.state.bgColorRecent || '',   
    }; 

    return(
     <table className="table table-hover table-striped table-bordered"> 
      <thead> 
       <tr> 
       <th className="rank">#</th> 
       <th className="username">Camper Name</th> 
       <th style={recentStyles} id='col-recent' className="recent clickable" onClick={this.getRecentData.bind(this)}> 
     {/* the rest of your render * /} 
    ) 
} 

Чтобы установить состояние по умолчанию большинство людей используют конструктор:

constructor() { 
    super(); 
    this.state = { bgColorRecent: 'black' }; 
} 

Если вы не установите состояние в конструкторе, то this.state будет неопределенным, пока вы не вызовете SetState в componentDidMount functi on, что означает, что он не будет определен в первом рендере. Требуя раздражающая защита:

const recentStyles = { 
    backgroundColor: (this.state || {}).bgColorRecent || '',   
}; 

Это лучше установить состояние по умолчанию для любого состояния реквизита, который ссылается в вашей визуализации функции.

Вы определенно считаете, что использование jQuery для этого - плохая идея. React позволяет взаимодействовать с виртуальной DOM и обновляет фактическую DOM стратегически на основе изменений в виртуальной DOM. Он сохраняет ссылки в фактическом DOM, чтобы сделать это эффективно. Это одна из причин, по которой Реакт настолько быстр и эффективен, как масштаб. Из-за этого, если вы начнете изменять фактический DOM с помощью jQuery, вы можете вызвать ряд различных проблем. Всякий раз, когда вам нужно взаимодействовать с DOM, вы хотите сделать что-то Реакт, чтобы использовать все свои силы.