если условие не оценивается в компоненте реакции

Question

Поэтому я создаю приложение со списком задач и предоставляю альтернативные цвета новым элементам задач, когда они добавляются в список задач. Я использовал оператор if else в компоненте React, но я думаю, что он не оценивается.

Ниже приведены два класса из моего css файла, который я использую ->

 .bgColorItem1{
    background-color: white;
}

.bgColorItem2{
    background-color:grey;
}

Ниже представлен компонент, который принимает аргументы item (todo item, который будет добавлен в список) и ключ (индекс передан как ключ) из todolist ->

  import React from 'react';
    import './App.css';

    const TodoItem=({item,key})=>{
        let settingClass="";

    // *****so the problem is here in the if condn that's not putting settingClass as bgColorItem1*****     
        if(key%2===0){
            settingClass="bgColorItem1";
        }else{
        settingClass="bgColorItem2";
    }

    return <div className={`boxSpace centerAligning ${settingClass}`}>{item}</div>
}

export default TodoItem;

Так что я ожидаю от этого кода, что ключ, который был индексом в компоненте todolist, переданном todo здесь выше, должен возвращать 0 для того, чтобы settingClass мог имеют альтернативные значения и, следовательно, обеспечивают альтернативные цвета. Но это не так.

Answer 1

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

{items.map((item, index) => <TodoItem item={item} index={index} />)}

В TodoItem

const TodoItem=({ item, index })=>{
        let settingClass=index % 2 === 0 ? 'bgColorItem1' : 'bgColorItem2';
    return <div className={`boxSpace centerAligning ${settingClass}`}>{item}</div>
}

Однако вам не нужно реагировать, чтобы сделать это, просто используйте css в вашем css

.boxSpace:nth-child(odd) {
  background: red;
}

.boxSpace:nth-child(even) {
  background: blue;
}

Answer 2

Вы не можете использовать key свойство, поскольку оно зарезервировано, также вы получите предупреждение за него :

Предупреждение: ListItem: key не является опора Попытка доступа к нему приведет к возвращению undefined. Если вам нужно получить доступ к одному и тому же значению в дочернем компоненте, вы должны передать его в качестве другого реквизита.

Простой пример:

const ListItem = ({ key }) => {
  console.log(key);
  return <div>{key}</div>;
};

const App = () => {
  return (
    <>
      {[0, 1, 2, 4].map(item => (
        <ListItem key={item} />
      ))}
    </>
  );
};

Answer 3

Ваш компонент TodoItem должен заботиться не о ключевой подпорке, а о булевой (или строке, если у вас более 2-х стилей) проп, как alternateStyle:

const TodoItem=({item,alternateStyle})=>{
    return <div className={
                 `boxSpace centerAligning ${alternateStyle ? 'bgColorItem2' : 
                 'bgColorItem1'}`
           }>
             {item}
           </div>

Тогда вы можете установить значение, которое необходимо указать alternateStyle в родительском компоненте:

<div>
   {items.map((item, index) => <TodoItem item={item} alternateStyle={index % 2 !== 0} />)}
</div>

Answer 4

ключ "prop" зарезервирован в React. Вы не можете использовать это. Переименуйте этот реквизит в «idx». См .: Специальный реквизит