在React中点击两个元素之间的className

Question

我正在使用FreeCodeCamp中的Sass和ReactJS处理“Camper's Leaderboard”challenge。我无法弄清楚如何在两个元素之间切换className：
其主要思想是：当用户点击标签时，处理函数被调用，但除此之外，我想在需要时添加 - 删除className =“noTriangle” 。这取决于父母组件中的“sortAllTime：true”状态。 下面的代码：

"use strict"; 
 
class TableBox extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      data: [], 
 
      sortAllTime: true 
 
     }; 
 
    } 
 

 
    loadCampersFromServer(sortAllTime) { 
 
     let templateURL = 'https://fcctop100.herokuapp.com/api/fccusers/top/'; 
 
     let url = sortAllTime ? (templateURL + 'alltime') : (templateURL + 'recent'); 
 
     fetch(url) 
 
      .then(
 
       (response) => { 
 
        if (response.status !== 200) { 
 
         console.log('Looks like there was a problem. Status Code: ${response.status}'); 
 
         return; 
 
        } 
 
        response.json().then((data) => { 
 
         console.log('getting data:..'); 
 
         this.setState({data, sortAllTime}); 
 

 
        }) 
 
       } 
 
      ) 
 
      .catch(function (err) { 
 
       console.log('Fetch Error :-S', err); 
 
      }); 
 
    } 
 

 
    _handlerAll() { 
 
     if (!this.state.sortAllTime) { 
 
      this.loadCampersFromServer(true); 
 
     } 
 
    } 
 

 
    _handler30() { 
 
     if (this.state.sortAllTime) { 
 
      this.loadCampersFromServer(false); 
 
     } 
 
    } 
 

 
    componentDidMount() { 
 
     this.loadCampersFromServer(true); 
 
    } 
 

 
    render() { 
 
     return <CampersList _data={this.state.data} 
 
          _handlerAll={this._handlerAll.bind(this)} 
 
          _handler30={this._handler30.bind(this)}/>; 
 
    } 
 
} 
 

 
class CampersList extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
    } 
 

 
    render() { 
 
     let campersNodes = this.props._data.map((element, index) => { 
 
      return (
 
       <Camper user={element} index={index}/> 
 

 
      ); 
 
     }); 
 
     return (
 
      <table> 
 
       <tr> 
 
        <th>#</th> 
 
        <th>Camper's Name</th> 
 
        <th onClick={this.props._handler30}>Points in past 30 days 
 
         <span className="noTriangle">&#9660;</span> 
 
        </th> 
 
        <th onClick={this.props._handlerAll}>All time points 
 
         <span >&#9660;</span> 
 
        </th> 
 
       </tr> 
 
       {campersNodes} 
 
      </table> 
 
     ) 
 
    } 
 
} 
 

 
class Camper extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
    } 
 

 
    render() { 
 
     return (
 
      <tr> 
 
       <td>{this.props.index + 1}</td> 
 
       <td> 
 
        <img src={this.props.user.img} alt="logo"/> 
 
        <span>{this.props.user.username}</span> 
 
       </td> 
 
       <td>{this.props.user.recent}</td> 
 
       <td>{this.props.user.alltime}</td> 
 
      </tr> 
 
     ) 
 
    } 
 
} 
 

 
ReactDOM.render(<TableBox />, document.getElementById('root'));

div#root { 
 
    margin: 0 auto; 
 
    width: 50%; } 
 

 
img { 
 
    width: 32px; } 
 

 
span { 
 
    padding: 20px 5px; } 
 

 
table { 
 
    font-family: 'Arial'; 
 
    margin: 25px auto; 
 
    border-collapse: collapse; 
 
    border: 1px solid #eee; 
 
    border-bottom: 2px solid #ccc0b8; 
 
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05); } 
 
    table tr:hover { 
 
    background: #f4f4f4; } 
 
    table tr:hover td { 
 
     color: #555; } 
 
    table tr th, table tr td { 
 
    color: #999; 
 
    border: 1px solid #eee; 
 
    padding: 12px 35px; 
 
    border-collapse: collapse; } 
 
    table tr th { 
 
    background: #619d9f; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    font-size: 12px; } 
 
    table tr th.last { 
 
     border-right: none; } 
 
    table tr th:nth-last-child(-n+2) { 
 
     cursor: pointer; } 
 
     table tr th:nth-last-child(-n+2):hover { 
 
     background: #427370; } 
 
    table tr th span.noTriangle { 
 
     display: none; } 
 

 
/*# sourceMappingURL=style.css.map */

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 1

在父组件，通过state.sortAllTime为CampersList道具， 在CampersList定义className，它是基于props.sortAllTime

class CampersList extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     let campersNodes = this.props._data.map((element, index) => { 
      return (
       <Camper user={element} index={index}/> 

      ); 
     }); 

     let triangleClass = this.props.sortAllTime ? '' : 'noTriangle'