以下版本几乎相同，那么为什么只有一个有效？

感激

请原谅。但是，为什么下面的工作...

{
  !submitted && !success && <button className="form-field" type="submit" title="Submit registration form">Register</button>
}
{
  submitted && success && <div className="success-message">Success! Thank you for registering</div>
}

而以下不是。代码几乎相同，唯一的区别是中间的两个花括号。所以为什么？

{
  !submitted && !success && <button className="form-field" type="submit" title="Submit registration form">Register</button>

  submitted && success && <div className="success-message">Success! Thank you for registering</div>
}

请注意

对于感兴趣的人，一种改进代码的方法是使用三元运算符。但是，要了解为什么上述方法不起作用，请查看以下答案。

{
  submitted && success ? 
    <div className="success-message">Success! Thank you for registering.</div> :
    <button className="form-field" type="submit" title="Submit registration form">Register</button>
}

这是Tasos

当您想在react的render方法中运行Javascript时，您需要通过使用{}JSX元素内部来告诉编译器它在哪里。

使用条件渲染等效于编写此代码：

if (!submitted && !success) {
  return (
    <div>text</div>
  )
}

因此，第二个示例无法编译，因为它将是这样的：

if (!submitted && !success) {
  return (
    <div>text</div>
  )submitted && success && <div className="success-message">Success! Thank you for registering</div>
}

这显然是错误的。

在条件渲染代码中渲染JSX时，将使用括号将其包装，并退出运行Javascript的代码块。

您显示的第二个示例不起作用（是正确的），因为在第一个条件渲染之后，它希望读取JSX。

在此处查看条件渲染的工作方式

和

在这里查看更多

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。