有人可以在 redux-form 验证中向我解释这个逻辑吗？答案

【问题标题】：can someone explain me this logic in redux-form validation?有人可以在 redux-form 验证中向我解释这个逻辑吗？
【发布时间】：2020-05-14 07:35:37
【问题描述】：

我已经知道这样做的结果是什么，但我不明白这是什么类型的逻辑，这是 if 还是类似的东西？

 {touched &&
    ((error && <span>{error}</span>) ||
      (warning && <span>{warning}</span>))}

来自

<div>
<label>{label}</label>
<div>
  <input {...input} placeholder={label} type={type} />
  {touched &&
    ((error && <span>{error}</span>) ||
      (warning && <span>{warning}</span>))}
</div>

【问题讨论】：

标签： javascript reactjs redux syntax redux-form

【解决方案1】：

在 javascript 中，&& 运算符在第一个 false 值上停止并返回该值。但是|| 一直在寻找，直到找到一个真实的值。

例如

true && 1 && 0; // 0
true && 1 && 'Hello'; // 'Hello'
false && true; // false

true || false || 1; // true
false || 'something'; // 'something'

因此，在这种情况下，仅当字段为 touched 时才会显示错误或警告，因此仅当 touched 为 true 时才会继续前进。

当touched 为true 时，它将寻找error，如果是false，|| 运算符将返回下一个警告值。

【讨论】：

【解决方案2】：

那些声明“显示错误和/或警告范围，当且仅当错误/警告被定义时”。这个想法是，如果警告/错误为空/未定义，则不会创建跨度。

【讨论】：

【解决方案3】：

类似于：

if (touched) {
  if (error) {
    // error
  } else if (warning) {
    // warning
  }
}

当字段被触摸时，它会显示错误/警告，如果有的话。

【讨论】：

【解决方案4】：

它们是在React 中使用的[logical && expression] 语法。换一种方式，让你更容易理解：

if (touched) {
  if (error) {
   display(error)
  } else if (warning) {
   display(warning)
  }
}

【讨论】：

【解决方案5】：

首先，如果touched 为假，则表达式的其余部分将被忽略，并且不会渲染任何内容。

如果error 评估为true，则error && {error} 为真（因为React 元素也是真），{error} 被渲染。在这种情况下，第二个 warning && <...> 不会被评估。

如果error 为假，则评估warning && {warning}，如果warning 为真，则渲染{warning}。

文档对此有何评论：https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator:

true && 表达式总是计算为表达式，而 false && 表达式的计算结果始终为 false。

因此，如果条件为真，&& 之后的元素将出现在输出中。如果为 false，React 将忽略并跳过它。

你可以在 jsx 表达式之外实现同样的效果：

let element;
if (touched) {
 if (error) element = <span>{error}</span>;
 else if (warning) element = <span>{warning}</span>;
}

return (
  <div>
    <input {...input} placeholder={label} type={type} />
    {element}
  </div>
)

【讨论】：