background-color React-Redux 中的简单更改

Question

我基本上完成了 FCC 的一个项目 (https://www.freecodecamp.com/challenges/build-a-camper-leaderboard)

唯一的定制是让用户看到 table 是从什么地方订购的（最近或历史上最好的分数）。

目前我有 jQuery 告诉我在用户单击最近或所有时间列时直接更改 header table css-attribute，但我没有觉得这是正确的方法。

这是我的容器代码，它基本上包含 table 本身

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

然后在渲染中使用 React 的内联样式功能响应状态：

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 将是未定义的，直到您在 componentDidMount 函数中调用 setState，这意味着它将在第一次渲染时未定义。需要烦人的保护：

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

最好为渲染函数中引用的任何状态道具设置默认状态。

您假设使用 jQuery 执行此操作是一个坏主意，这绝对是正确的。 React 允许您与虚拟 DOM 交互，它会根据虚拟 DOM 中的变化战略性地更新实际 DOM。它在实际 DOM 中保留引用以有效地执行此操作。这是 React 如此快速和高效的原因之一。因此，如果您开始将实际的 DOM 更改为 jQuery，您可能会导致许多不同的问题。每当您需要与 DOM 交互时，您都希望以 React 的方式做事以利用它的所有功能。

background-color React-Redux 中的简单更改

Simple background-color change in React-Redux

css

jquery

reactjs

react-redux