簡單的背景顏色的變化作出反應，終極版

Question

我基本上符合FCC的工程之一完成（https://www.freecodecamp.com/challenges/build-a-camper-leaderboard）

唯一的定製是，我想爲用戶，看看錶，從有序（或最近或全部最佳成績）。

目前，我有它使用jQuery告訴當用戶單擊近期或alltime柱直接更改標題表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); 

我還是新來我的容器代碼陣營，終極版這樣的狀態的模式仍然是新的我。

Answer 1

您可以使用陣營的狀態功能來實現這一點。所以，在你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是不確定的，直到你在componentDidMount functi調用的setState設置狀態這意味着它在第一次渲染中將會是未定義的。需要惱人的保護：

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

最好爲渲染函數中引用的任何狀態prop設置默認狀態。

你一定是在假設使用jQuery做這個正確的是一個壞主意。 React允許您與虛擬DOM進行交互，並根據虛擬DOM中的更改戰略性地更新實際的DOM。它將實際DOM中的引用保持有效地執行此操作。這是React如此快速高效的原因之一。正因爲如此，如果你開始用jQuery改變實際的DOM，你可能會導致許多不同的問題。無論何時您需要與DOM進行交互，您都希望通過React方式來利用其所有功能。