在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

元素变量

可以使用变量来储存元素。以此来有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。

与运算符 &&

通过花括号包裹代码，可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符，可以很方便地进行元素的条件渲染。
在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。（php也是如此）
因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

三目运算符

另一种内联条件渲染的方法是使用三目运算符 condition ? true : false

阻止组件渲染

在极少数情况下，你可能希望隐藏组件，即使它被其他组件渲染。让 render 方法返回 null 而不是它的渲染结果即可实现。

组件的 render 方法返回 null 并不会影响组件生命周期方法的回调。例如，componentWillUpdate 和 componentDidUpdate 依然可以被调用。