有人可以在 redux 表单验证中向我解释这个逻辑吗？

Question

我已经知道这是什么结果了，但我不明白这是什么逻辑，这是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>

Answer 1

那些是 "display an error and/or warning span, if and only if the error/warning is defined"。这个想法是，如果 warning/error 是 null/undefined.

，则不会创建跨度

Answer 2

首先，如果 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 && expression always evaluates to expression, and false && expression always evaluates to false.

Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.

你可以在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>
)

Answer 3

类似于：

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

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

Answer 4

它们是 React 中使用的 [logical && expression] 语法。为了让您更容易理解它：

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

Answer 5

在 javascript 中，&& 运算符在第一个假值和 return 处停止。但是 || 一直在寻找，直到找到一个真实的值。

例如

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，则 || 运算符将 return下一个警告值。

有人可以在 redux 表单验证中向我解释这个逻辑吗？

can someone explain me this logic in redux-form validation?

javascript

reactjs

redux

syntax

redux-form