React:Conditional Rendering（条件渲染）

就像JS中常常会根据条件（比如if/else、switch）返回不同的值，React中也可以根据组件的状态或其他参考条件返回不同的React Element。

比如根据用户是否登陆渲染对应的UI面板。

 1 class LoginControl extends React.Component {
 2   constructor(props) {
 3     super(props);
 4     this.handleLoginClick = this.handleLoginClick.bind(this);
 5     this.handleLogoutClick = this.handleLogoutClick.bind(this);
 6     this.state = {isLoggedIn: false};
 7   }
 8
 9   handleLoginClick() {
10     this.setState({isLoggedIn: true});
11   }
12
13   handleLogoutClick() {
14     this.setState({isLoggedIn: false});
15   }
16
17   render() {
18     const isLoggedIn = this.state.isLoggedIn;
19
20     let button = null;
21     if (isLoggedIn) {
22       button = <LogoutButton onClick={this.handleLogoutClick} />;
23     } else {
24       button = <LoginButton onClick={this.handleLoginClick} />;
25     }
26
27     return (
28       <div>
29         <Greeting isLoggedIn={isLoggedIn} />
30         {button}
31       </div>
32     );
33   }
34 }
35
36 ReactDOM.render(
37   <LoginControl />,
38   document.getElementById('root')
39 );

Class: constructor(props+state+binded-handler) + handler +render( return React Elements))

该结构中，只有render函数内用JSX最终输出React Elements。

inline-if：

可以用&&操作符充当if,左边为真时再执行右边，否则跳过。

 1   return (
 2     <div>
 3       <h1>Hello!</h1>
 4       {unreadMessages.length > 0 &&
 5         <h2>
 6           You have {unreadMessages.length} unread messages.
 7         </h2>
 8       }
 9     </div>
10   );

inline-if-else:

1     <div>
2       The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
3     </div>

当条件比较复杂时，推荐将组件的模板拆分。

隐藏组件：

当希望组件隐藏时，让其返回null即可。不过这并不影响到生命周期函数的执行。 componentWillUpdate 和componentDidUpdate依然会被触发哦。

 1 function WarningBanner(props) {
 2   if (!props.warn) {
 3     return null;
 4   }
 5   //...
 6   render() {
 7     return (
 8       <div>
 9         <WarningBanner warn={this.state.showWarning} />
10         <button onClick={this.handleToggleClick}>
11           {this.state.showWarning ? 'Hide' : 'Show'}
12         </button>
13       </div>
14     );
15   //...

转载于:https://www.cnblogs.com/alan2kat/p/7466689.html

React:Conditional Rendering（条件渲染）相关推荐

React - Initial Rendering(初始化渲染)
React - Initial Rendering(初始化渲染) 以下内容均从源码角度分析,UI更新本质上是数据更改(props或者state) = render(state).React提供了一种直 ...
react把表格渲染好ui_在React中实现条件渲染的7种方法
借助react,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染. 条件渲染一词描述了根据某些条件渲染不同UI标签的能力.在react文档中,这是一种根据条件渲染不 ...
react 条件渲染
在 React 中,你可以创建不同的组件来封装各种你需要的行为.然后还可以根据应用的状态变化只渲染其中的一部分. React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript ...
web前端高级React - React从入门到进阶之React条件渲染
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
React条件渲染、列表渲染和组件传值
React中实现v-show 父组件 import React from "react"; import Child4 from "./components/Child4 ...
CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率
CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...
React中文文档之Conditional Rendering
Conditional Rendering - 有条件的渲染在React中,你可以创建唯一的组件,来封装你需要的行为.之后,你可以仅仅渲染它们中的一些,这取决于你应用的状态. React中的有条件的 ...
react 条件渲染_React中的条件渲染语法
react 条件渲染为什么我们不能使用If-Else以及三元运算符如何提供帮助 (Why We Can't Use If-Else and How the Ternary Operator can ...
条件渲染之react高阶组件——HOC
定义:它接受任何输入(多数时候是一个组件)并返回一个组件作为输出.返回的组件是输入组件的增强版本,并且可以在 JSX 中使用.不是react api而是一种设计模式. 作用:强化组件,复用逻辑,提升渲 ...

React:Conditional Rendering（条件渲染）

React:Conditional Rendering（条件渲染）相关推荐

最新文章

热门文章