如何为偶数和奇数创建一个 React 类答案

【问题标题】：How to create a React class for even and odd numbers如何为偶数和奇数创建一个 React 类
【发布时间】：2020-10-11 20:07:00
【问题描述】：

**我有一个显示当天新闻的代码。 https://ibb.co/QMLY2Kx 我有 10 个名为“block”的类。在“block”类中有两个名为“blockText”的类。我需要得到两个不同的类名并且不一样，我想得到这个结果“blockText1”和“blockText2”。怎么做？ **

import React from 'react';
import newsStyle from './News_module.css';

export class News extends React.Component {
    render() {

        const resultsRender = [];


        for (var i = 0; i < this.props.news.length; i += 2) {
            resultsRender.push(
                <div class="block">
                    {
                        this.props.news.slice(i, i + 2).map((news, index) => {
                            return (
                                <div class="blockText" key={index}>
                                    <p class="text">{news.title}</p>
                                    {console.log(this.props.news.length)}
                                </div>
                            );
                        }

                        )
                    }
                </div>
            );
        }

        return (
            <div>
                <div className="headlineSecond">
                    <div className="Second">
                        {resultsRender}
                    </div>
                </div>
            </div>
        );
    }
}

【问题讨论】：

你考虑过只使用 CSS 吗？ nth-child(odd), nth-child(even)，这种事？
一个不错的选择，我一定会在以后的实践中考虑到这一点

标签： javascript arrays reactjs class

【解决方案1】：

您可以为此使用三元运算符。这是一个示例，我根据 index 的值选择了 class 的值，并决定它是偶数还是奇数

<div class={ index%2 ===0 ? "blockText1": "blockText2" } key={index}>

    .....  rest of code 

</div>

【讨论】：