为什么这等于True并因此在React中呈现div？

Question

我有点困惑，为什么当errors.email不是假值时，这会呈现。 JSX是否被忽略，它只查看右侧的errors.email，所以表达式基本上是if (errors.email && errors.email)？

有点奇怪。我以前从没见过这个。

{ errors.email && ( <div className="invalid-feedback">{errors.email}</div> ) }

Answer 1

与其他一些语言不同，&&和||不一定会产生true或false;相反，他们取得了其中一个操作数的价值。

如果是&&：

• 如果errors.email falsy ，则&&表达式的结果为errors.email的值（右侧是永远的求值）。

• 如果errors.email truthy ，则评估右侧并且（对它的创建）对象的引用成为{{1}的结果表达。