Блог

У меня много div в каскаде. и я хочу применить альтернативные цвета к моему голбальному div (например, зеленый, желтый). Но я хочу, чтобы цвета начинались с начала глобального div, а не с начала div, который его содержит..

Я создал это, используя рекурсивность.

Это то, что у меня есть (я отобразил границы div, чтобы объяснить дизайн страницы, которая у меня есть.)

Это то, что я хочу

Реагирующий код

 <div>
    {
        intervenants.map(i => {
            return (updateListDiv(i))
        })
     }
</div>
 

  const updateListDiv = (intervenant) => {
        if (intervenant.children amp;amp; intervenant.children.length > 0) {
            return (
                intervenant.children.map((int, index) => {
                    let n = int.name   ' ( '   int.profile.name   ' ) '
                    return (<div className="a b" key={Math.random()}>
                        <a> {int.name} </a>
                        ( {int.profile.name} )
                        {updateListDiv(int)}
                    </div>)
                })
            )
        } else {
        }
    }
 

css

 .a {
    margin-left: 30px;
}

.b {
    line-height: 24pt;
    border: solid 1px black;
}
 

Каждый элемент должен знать предыдущий цвет. Таким образом, вы можете сохранять состояние глобально или (возможно, лучше) передавать состояние своей updateListDiv функции.

Здесь я вызываю состояние isEven :

 import React from 'react';
const intervenants = [
    { name: 'a', profile: { name: 'pa' }, children: [ { name: 'a.a', profile: { name: 'pa.a' }, children: null }, { name: 'a.b', profile: { name: 'pa.b' }, children: null }, ] },
    { name: 'b', profile: { name: 'pb' }, children: [ { name: 'b.a', profile: { name: 'pb.a' }, children: null }, { name: 'b.b', profile: { name: 'pb.b' }, children: null }, ] },
    { name: 'c', profile: { name: 'pc' }, children: [ { name: 'c.a', profile: { name: 'pc.a' }, children: null }, { name: 'c.b', profile: { name: 'pc.b' }, children: null }, ] },
];

const updateListDiv = (intervenant, isEven) => {
    if (!intervenant.children || intervenant.children.length < 1) {
        return;
    }

    return (
        intervenant.children.map((int, index) => {
            isEven = !isEven;
            return (<div
                key={ index }
                style={{
                    marginLeft: '30px',
                    border: 'solid 1px',
                    backgroundColor: isEven ? '#ff0' : '#0f0',
                }}
            >
                { int.name }
                { updateListDiv(int, isEven) }
            </div>);
        })
    );
}

export const ColorTree = ()=>{
    return (<div>
        { updateListDiv({ children: intervenants }, false) }
    </div>);
};
 

В качестве альтернативы, вы можете передать общий индекс и проверить по модулю-2.

Мне больше нравится этот подход, потому что он более гибкий (может пригодиться иметь «общий» индекс внутри дочерних элементов, а также становится возможным, например, использовать modulo-3 или что-то в этом роде)

 const updateListDiv = (intervenant, overAllIndex) => {
    // ...
    return (
        intervenant.children.map((int, index) => {
            overAllIndex  ;
            return (<div
                style={{
                    backgroundColor: (overAllIndex % 2) ? '#ff0' : '#0f0',
                }}
            >
                { updateListDiv(int, overAllIndex) }
            </div>);
        })
    );
}