在React中的array.map内部使用条件逻辑

如何解决在React中的array.map内部使用条件逻辑

我正在学习React，并且正在使用array.map遍历一系列人员并显示有关他们的信息。我还需要向每个人显示一条消息（voterMessage），这取决于该人的年龄。

我知道我可以使用内联三元运算符执行此操作（因为在这种情况下，我只有两个选项），但是我想使用if / else进行处理，以防以后需要添加更多选项。 / strong>

我不知道如何以及在何处放置此条件才能使其正常工作。我将条件语句移到了代码中的多个位置，每次遇到不同的错误时，都将其移至其他位置。下面的代码在第12行（else语句后的p标签）引发了意外的令牌错误。

研究此问题仅提出了在return语句之外处理条件的方法，使用三元运算符的方法以及直接访问属性的方法，但是当属性是数组且条件必须基于该数组中对象的属性应用于该数组中的每个对象。

const Person = (props) => {
    let voterMessage;
    return (
        
        <div>{props.people.map(p =>
            {if (p.age > 18) {
                voterMessage = "please go vote"
            } 
            else {
                voterMessage = "you must be 18"
            }}           
                <p>Learn some information about this person</p>
                <ul>
                    <li>Name: {p.name}</li>
                    <li>Age: {p.age}</li>
                    <h3>{voterMessage}</h3>
                </ul>
        )}</div>
    )
}

解决方法

.map是需要您返回值的函数。它基本上是通过将已经存在的值转换为新值，从当前值创建一个新数组。您的原始功能是一堆花括号，因此我将其细化了一些。我会说<h3>标记中的<ul>困扰我，我认为它不是有效的HTML，但是我让您自己弄清楚。

另一个问题是，您在声明map函数的voterMessage变量外部，这可能会在以后给您带来一些错误。坦白地说，您不需要它。内容为

 {p.age >= 18 ? 'Please go vote' : 'You must be 18'}

被称为ternary expression。当处理依赖于变量且只能输出两个选项之一的语句时，它们非常有用。

如有任何疑问，请告诉我。

const Person = (props) => {
  return (
    <div>
      {props.people.map((p) => {
        let voterMessage;
        if (p.age >= 18) {
          voterMessage = "Please go vote";
        } else {
          voterMessage = "You must be 18";
        }

        return (
          <React.Fragment>
            <p>Learn some information about this person</p>
            <ul>
              <li>Name: {p.name}</li>
              <li>Age: {p.age}</li>
              <h3>{voterMessage}</h3>
            </ul>
          </React.Fragment>
        );
      })}
    </div>
  );
};

编辑

OP特别希望if / else代替三元。更新了代码以反映这一点，但将三元链接留在其中，以供其他可能阅读此问题的人使用。

,

如果使用三元，则可以使用

删除此

{ if (p.age > 18) {
     voterMessage = "please go vote"
  }else {
     voterMessage = "you must be 18"
  }
}

并在您的h3中添加

{p.age > 18 ? 'please go vote' : 'you must be 18'}

如果您要使用多个if-else，可以将其嵌套

{p.age > 18 ? 'please go vote' 
 : p.age > 17 ? 'almost there' : 'Whats taking you so long' }