【React】根据条件渲染不同的组件内容

最新推荐文章于 2023-01-30 15:13:59 发布
最新推荐文章于 2023-01-30 15:13:59 发布
阅读量3.4k 收藏 5
点赞数 4
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40571965/article/details/107747773
版权

需求如下：
在这里插入图片描述
在这里插入图片描述

但我点击不同的按钮时，下面渲染的是不同组件的内容（wokao这个图片大小咋调，每回都贼大）
第一步：先写好不同组件的内容
在这里插入图片描述

第二步：在state状态里面加一个Type进行记录。
第三步：核心代码如下
在这里插入图片描述
在这里插入图片描述
好了，说白了就是通过改变type的值来改变显示的状态。
应该是小学生写法了…给小白们参考一下吧
最近要用react hooks重新写一下…

Point酱
关注
专栏目录
React中的条件渲染
Y974066017的博客
03-21 978
方法1. state={age:18} //条件渲染 方法1 promtWelcome(){ if(this.state.age>=18){ return(<div>已经18岁</div>) }else{ return(<alert>未成年</alert>) } } render() { return ( <div>{this
在 React 中实现条件渲染的七种方法
热门推荐
a77582581234的博客
05-24 1万+
条件渲染方式 一、if 语句 先从 React 最基本的条件类型来看。如果有数据就显示组件，如果没有数据就不显示任何内容。posts 为需要渲染的列表： export default function App() { const { posts } = usePosts(); if (!posts) return null; return ( <div> <PostList posts={posts} /> </div&g..
react条件渲染
沈斯明技术博客
09-13 1512
条件渲染 元素变量 声明一个变量，用if判断该变量需要赋值的组件 let button = null; if (isLoggedIn) { button = LogoutButton onClick={this.handleLogoutClick} />; } else { button = LoginButton onClick={th
React 组件与状态
平安蜀黍的记事本
01-09 329
企业项目实战 > 第二部分 > React 基础回顾 React 组件与 State 什么是组件 组件是什么？每个程序员都有自己的理解：在传统语言中, 组件的定义一般来说是一个从特定的组件类中派生出来的特定的对象；而在早期的前端开发者眼里, 组件是一个可复用的独立 UI 模块；在 React 中, 得益于 JSX 语法, 所有的页面元素都被转换成了 React 对象。只要你的方法 return 的是一个 React 元素, 小到一个 text, 大到一个 page, 都可以认为是 R.
React 组件的分类和Render返回值
weixin_44954059的博客
04-04 1394
1.类组件和函数式组件 划分依据是根据组建的定义方式， 函数式组件使用函数定义组件，类组件使用es6定义组件， 类组件可以维护自身的状态 有state， 有生命周期， 函数时组件更简洁，只返回一个render， 使用的是无状态组建的思想，由于无法使用state，也没有生命周期，这决定了函数式组件是展示型组件，没有this，无需考虑this带来的问题。 2.展示型组件和容器类组件 展示型组件和容器类组件的划分规则是工作职责 容器类组件主要职责是，组件如何工作的。 更具体的就是数据如何让更新，容器类组件需要知道
详解React 的几种条件渲染以及选择
10-17
条件渲染是React中的一种重要技术，它允许开发者根据应用的状态来渲染不同的界面。在React中进行条件渲染时，通常需要处理多种不同的页面展示状态，例如空列表、加载状态、错误状态和成功加载数据后的正常状态等。 ...
react-cond:React 的条件渲染组件
07-13
React条件 使用成对的 [boolean, Component] 有条件地渲染组件。 用法 将此包安装到您的项目中。 使用 CommonJS： var Cond = require ( 'react-cond' ) ; var YourComponent = React . createClass ( { render...
React 条件渲染最佳实践小结(7种)
10-14
本篇文章将深入探讨七种React条件渲染的最佳实践，帮助开发者更高效地编写代码。 1. **If Else条件渲染** 在JavaScript中，我们通常使用`if...else`语句来进行条件判断。在React中，若要在JSX外部执行多行代码，...
React根据条件渲染不同的组件
江理彭于晏的博客
11-21 2747
最近在做一个电商后台管理项目，碰到了一个要根据前面的条件不同来渲染不同的组件，如下图所示 要根据商品的分类来显示不同的商品属性，最开始以为简单的使用switch来判断条件即可，但是在react组件当中，一个函数是不能返回另一个函数的，这就导致了一系列的bug。后来换一种思路就解决了 {classfy[0] === '服装' && (<ShowClother/> )} {classfy[0] === '家电' && (<Show
详解React 条件渲染
10-15
在React框架中，条件渲染是实现动态界面的一个核心概念，它允许开发者根据组件的当前状态...通过理解React条件渲染的不同方法和最佳实践，开发者可以更加灵活和高效地构建用户界面，同时也能更好地处理复杂的界面逻辑。
React中有关于单选按钮的选择以及其下内容的变化
weixin_45778591的博客
04-27 1129
选中单选按钮以及下面内容的变化 目前碰到的需求是: 点击单选按钮，选择不同的按钮来显示不同的内容 用的是 react 的组件库 Ant Design： 这就是需要做到的要求： 刚开始亏很懵逼的，然后通过学习做到了，但是用的是：组件 来吧 ，看看代码： import React, { Component } from "react"; import { Row, Col, Radio, Checkbox, Input } from "antd"; const plainOptions = ['星期一',
react中根据不同的条件渲染对应的组件
qq_37967853的博客
01-30 786
react中根据不同的条件渲染对应的组件
React基础-JSX语法条件渲染详解
m0_71485750的博客
09-20 8195
逻辑与运算符&&, 适合如果条件成立，渲染某一个组件;如果条件不成立，什么内容也不渲染;主要是控制display属性是否为none, 在React中也可以实现v-show的效果。在React中，所有的条件判断都和普通的JavaScript代码一致;例如下面代码表示student有值的时候才会渲染, 没有值什么也不渲染。在vue中，我们会通过指令来控制:比如v-if、v-show;方式一: 条件判断语句判断, 适合逻辑较多的情况。方式二: 三元运算符判断, 适合逻辑比较简单。类似于Vue中v-if的效果。
react中根据条件渲染不同内容
玉林路扛把子
04-04 3248
 render() {        return (          &lt;div className="timeSelect fleft"&gt;                  {this.state.visible&amp;&amp;&lt;span&gt;visible=true&lt;/span&gt;                 }                 {!th...
React 根据不同状态渲染用户界面
教官的博客
12-20 966
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 将生命周期方法添加到类中 在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。 每当 Clock 组件第一次加载到 DOM 中的时候...
React—条件渲染不同的组件
Poppy_LYT的博客
09-10 891
import React from 'react'; import ReactDom from 'react-dom'; class UserGreeting extends React.Component { render () { return (<h1>欢迎回来！</h1>) } } class GuestGreeting exten...
React学习笔记之条件渲染（一）
10-19
条件渲染在React里就和js里的条件语句一样。下面这篇文章主要给大家介绍了关于React学习记录之条件渲染的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
react 根据条件渲染页面（多种条件）
water_Popcorn的博客
10-30 1230
js源码： importReact,{Component}from'react'; importstylesfrom'./css/User.css'; classAddUserextendsComponent{ constructor(props){ super(props); this.state={rol...
2000-2021年中国科技统计年鉴（分省年度）面板数据集-最新更新.zip
最新发布
11-14
2000-2021年中国科技统计年鉴（分省年度）面板数据集-最新更新.zip
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值