在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'