React 组件条件渲染的几种方式

一、条件表达式渲染 (适用于两个组件二选一的渲染)

复制代码
 1 render() {
 2   const isLoggedIn = this.state.isLoggedIn;
 3   return (
 4     <div>
 5       {isLoggedIn ? (
 6         <LogoutButton onClick={this.handleLogoutClick} />
 7       ) : (
 8         <LoginButton onClick={this.handleLoginClick} />
 9       )}
10     </div>
11   );
12 }
复制代码

二、&& 操作符渲染 (适用于一个组件有无的渲染)

复制代码
 1 function Mailbox(props) {
 2   const unreadMessages = props.unreadMessages;
 3   return (
 4     <div>
 5       <h1>Hello!</h1>
 6       {unreadMessages.length > 0 &&
 7         <h2>
 8           You have {unreadMessages.length} unread messages.
 9         </h2>
10       }
11     </div>
12   );
13 }
复制代码

三、利用变量输出组件渲染 (适用于有多个组件多种条件下的渲染)

复制代码
 1 render() {
 2     const isLoggedIn = this.state.isLoggedIn;
 3     
 4     const button = isLoggedIn ? (
 5       <LogoutButton onClick={this.handleLogoutClick} />
 6     ) : (
 7       <LoginButton onClick={this.handleLoginClick} />
 8     );
 9 
10     return (
11       <div>
12         <Greeting isLoggedIn={isLoggedIn} />
13         {button}
14       </div>
15     );
16   }
复制代码

四、利用函数方法输出组件或者利用函数式组件进行渲染 (适用于多个子组件需要根据复杂的条件输出的情况)

1. 函数方式

复制代码
 1 renderButton(){
 2     const isLoggedIn = this.state.isLoggedIn;
 3     if(isLoggedIn)
 4     {
 5        return (<LogoutButton onClick={this.handleLogoutClick} />);
 6     }
 7     else
 8     {
 9       return (<LoginButton onClick={this.handleLoginClick} />);
10     }
11 }
12 
13 render() {
14     return (
15       <div>
16         <Greeting />
17         {this.renderButton()}
18       </div>
19     );
20   }
复制代码

 

2. 函数式组件

复制代码
 1 function Greeting(props) {
 2   const isLoggedIn = props.isLoggedIn;
 3   if (isLoggedIn) {
 4     return <UserGreeting />;
 5   }
 6   return <GuestGreeting />;
 7 }
 8 
 9 ReactDOM.render(
10   // Try changing to isLoggedIn={true}:
11   <Greeting isLoggedIn={false} />,
12   document.getElementById('root')
13 );
复制代码

 

posted @   箫笛  阅读(17416)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示