nth-child (нечетный) влияет на всех детей вместо нечетных

Question

В моем портфеле есть диапазон, который я хочу изменить с каждой нечетной записью. Проекты динамически отображаются из массива, который отображается и передается в этот компонент через реквизиты.

Я также использую стилевые компоненты.

Проблема, с которой я столкнулся, заключается в том, что нечетное или четное в nth-потомке влияет на все проекты. Например, когда он нечетный, ни один из них не инвертирован, но когда он включен, все они инвертированы. Что я здесь пропустил?

Answer 1

<SummaryContainer/> не отображается. Это означает, что я предполагаю, что вы используете карту для всего компонента Project. Вот почему nth child не работает. Более простой способ сделать это,

Шаг 1: передать index в качестве реквизита Project Component.

Шаг 2: Пропустить стиль, чтобы добавить строку или обратный ряд на основе нечетного четные логики c

<JobContainer style={{ flexDirection: props.index % 2 ? 'row' : 'row-reverse' }}>

</JobContainer>

Шаг 3: <JobContainer /> component просто используйте этот стиль как prop.style

Это должно решить вашу проблему.