React Components 类名中的三元条件

Ternary Conditions in React Components className

本文关键字：三元 条件 Components React      更新时间：2023-09-26

我正在从 json 文件中提取数据，并仅在满足特定条件时才尝试添加类：

    render: function() {
    var gameList = this.props.data.map(function(game) {
        return (
            <li key={game.id} className="list-group-item">
                    {game.home_team_name}
                    <span className="pull-right {game.home.score} > {game.away.score} ? 'highlight':'' ">{game.home.score}</span> <br />
                    {game.away_team_name}
                    <span className="pull-right {game.home.score} > {game.away.score} ? 'highlight':'' ">{game.away.score}</span> <br />
                    {game.status.status}
            </li>   
        );
    });

如果满足条件，此方法似乎只会将存在的任何内容添加到类中，而不是"突出显示"类。

还可以在 .map 方法中再次定义一个变量以减少重复吗？

我试过了 var homeScore = {game.home.score}但是，没有运气

您需要将整个三元语句放在括号中：

{parseInt(game.home.score, 10) > parseInt(game.away.score, 10) ? 'highlight':''}

是的，您可以定义另一个变量。只需将其放在return之前：

render: function() {
    var gameList = this.props.data.map(function(game) {
        var classNameExt = parseInt(game.home.score, 10) > parseInt(game.away.score, 10) ? 'highlight':'';
        return (
            <li key={game.id} className="list-group-item">
                    {game.home_team_name}
                    <span className={'pull-right ' + classNameExt}>{game.home.score}</span> <br />
                    {game.away_team_name}
                    <span className={'pull-right ' + classNameExt}>{game.away.score}</span> <br />
                    {game.status.status}
            </li>   
        );
    });

或者只突出显示获胜者：

render: function() {
    var gameList = this.props.data.map(function(game) {
        return (
            <li key={game.id} className="list-group-item">
                    {game.home_team_name}
                    <span className={'pull-right ' + (parseInt(game.home.score, 10) > parseInt(game.away.score, 10) ? 'highlight':'')}>{game.home.score}</span> <br />
                    {game.away_team_name}
                    <span className={'pull-right ' + (parseInt(game.home.score, 10) < parseInt(game.away.score, 10) ? 'highlight':'')}>{game.away.score}</span> <br />
                    {game.status.status}
            </li>   
        );
    });
相关文章：