JSX 中内联条件渲染的方法

在 React 中，可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，只渲染对应状态下的部分内容。
React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。if 语句进行条件渲染是不错的方式，但有时你可能会想使用更为简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。

1、与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。

2、三目运算符

通过使用 JavaScript 中的三目运算符 condition ? true : false

3、隐藏渲染（阻止组件渲染）

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。可以让 render 方法直接返回 null，而不进行任何渲染。

运行在浏览器：

在组件的 render 方法中返回 null 并不会影响组件的生命周期。在上例的基础上添加componentDidUpdate 方法，componentDidUpdate 依然会被调用。

     componentDidUpdate(prevProps, prevState) {
          console.log('prevState'+JSON.stringify(prevState));          
        }