if else 条件不在反应组件中评估答案

【问题标题】：if else condition not evaluating in react componentif else 条件不在反应组件中评估
【发布时间】：2020-06-01 17:18:06
【问题描述】：

所以我正在制作一个待办事项列表应用程序并为新的待办事项提供替代颜色，因为它们被添加到待办事项列表中，我在 React 组件中使用了 if else 语句，但我认为它没有评估。

以下是我正在使用的 css 文件中的两个类 -->

 .bgColorItem1{
    background-color: white;
}

.bgColorItem2{
    background-color:grey;
}

下面是从todolist接受参数item（将添加到列表中的待办事项）和key（作为key传递的索引）的组件 -->

  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 可以具有替代值并因此提供替代颜色。但事实并非如此。

【问题讨论】：

你是如何传递密钥的？不要使用 key 的值，使用 index/id 之类的东西
你不能使用key prop，它是保留的
keys 在 React 中有特殊的含义，不能简单地从组件的 props 中读取。考虑使用不同的术语。 reactjs.org/docs/lists-and-keys.html#keys
settingClass 仅存在于“TodoItem”函数中，您的值是“未定义”，您也没有在“TodoItem”函数中返回

标签： javascript reactjs jsx

【解决方案1】：

key "prop" 在 React 中是保留的。你不能使用它。将此道具重命名为“idx” 见：Special props

【讨论】：

虽然答案是正确的，但您应该按照 SO 用户的预期解释和详细说明您的答案。
嗯...还有什么要解释的？我写道它是保留（特殊）道具。当然，组件无法访问该道具。

【解决方案2】：

你不能使用key属性，因为它是保留的，also you will get a warning for it：

警告：ListItem：key 不是道具。尝试访问它会导致 undefined 被返回。如果您需要在子组件中访问相同的值，则应将其作为不同的 prop 传递。

简单示例：

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

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

【讨论】：

【解决方案3】：

您的 TodoItem 组件不必关心 key 属性，而应该关心一个布尔值（如果您有超过 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>

【讨论】：

钥匙在哪里？ key={index} 在没有 key 的循环中使用 TodoItem 时，控制台会报错
@Max 如果您不在循环中使用 key 属性，则会收到警告，但如果您使用索引作为键，您仍然会收到警告无论如何，它是默认值。

【解决方案4】：

首先，不要使用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;
}

【讨论】：