Может кто-нибудь объяснить мне эту логи c в форме проверки в редуксе?

Question

Я уже знаю, каков результат этого, но я не могу понять, что это за логика c, это если или что-то подобное?

 {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

В javascript, оператор && останавливается на первом ложном значении и возвращает это значение. но || продолжает искать, пока не найдет истинное значение.

например,

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, оператор || вернет следующее значение что является предупреждением.

Answer 2

Это синтаксис [logical && expression], используемый в React . Чтобы выразить это так, чтобы вам было легче понять:

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

Answer 3

Во-первых, если touched равно false, остальная часть выражения игнорируется и ничего не равно сотне.

Если error оценивается как true, то error && <span>{error}</span> является истинным (поскольку элемент React тоже правда), и <span>{error}</span> отображается. В этом случае второй warning && <...> не оценивается.

Если error ложно, то warning && <span>{warning}</span> оценивается, а если warning верно, <span>{warning}</span> отображается.

То, что делает c, говорит по этому поводу: https://reactjs.org/docs/conditional-rendering.html#inline -if-with-logic - оператор :

true && выражение всегда вычисляется как выражение, и ложное выражение && всегда оценивается как ложное.

Поэтому, если условие истинно, элемент сразу после && появится в выходных данных. Если оно ложно, 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>
)

Answer 4

Это похоже на:

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

Отображается ошибка / предупреждение, если оно есть, при касании поля.

Answer 5

Это сообщение «отображать диапазон ошибок и / или предупреждений, если и только если определена ошибка / предупреждение». Идея состоит в том, что диапазон не создается, если предупреждение / ошибка равны нулю / не определены.