react 根据条件渲染页面（多种条件）

小咪咪 2023-06-11 10:22 106阅读 0赞

js源码：

import React, \{ Component \} from 'react';

import styles from './css/User.css';

class AddUser extends Component \{

constructor(props) \{

super(props);

this.state = \{role: 1,

\};

\}

/\*\*

\* 主体

\*/

render() \{

let teacherDom = null

if (this.state.role === 1 && this.state.role!=2) \{

teacherDom = <div className=\{styles.innerDiv\}>

<p>教师条件下的dom</p>

</div>

\}

let studentDom = null

if (this.state.role === 2 && this.state.role !==1) \{

studentDom = <div className=\{styles.innerDiv\}>

<p>学生条件下的dom</p>

</div>

\}

return (

<div>

\{/\*教师特有\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* \*/\}

\{teacherDom\}

\{/\*学生特有\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* \*/\}

\{studentDom\}

</div>

);

\}

\}

export default AddUser

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 React基础-JSX语法条件渲染详解

React条件渲染某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容: > 在vue中，我们会通过指令来控制:比如v-if、v-show

雨点打透心脏的1/2处/ 2023年10月02日 20:49/ 0 赞/ 63 阅读

相关条件渲染、列表渲染

条件渲染 1）v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。 <h1 v-if="type">

今天药忘吃喽~/ 2023年07月13日 13:46/ 0 赞/ 158 阅读

相关 react 按条件渲染内容

![20200217201155534.png][] //按条件渲染内容 && 数组大于0时，渲染 import React from 'react

谁践踏了优雅/ 2023年07月06日 09:54/ 0 赞/ 35 阅读

相关 react 根据条件渲染页面（多种条件）

js源码： import React, \{ Component \} from 'react'; import styles from './css/User.css';

小咪咪/ 2023年06月11日 10:22/ 0 赞/ 107 阅读

相关 react 条件渲染

在 `React` 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 `React` 中的条件渲染和 `JavaScript`

朴灿烈づ我的快乐病毒、/ 2022年12月27日 01:42/ 0 赞/ 324 阅读

相关 React学习之条件渲染

说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github

た入场券/ 2022年12月02日 15:27/ 0 赞/ 310 阅读

相关 Vue条件渲染

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

约定不等于承诺〃/ 2021年09月20日 02:54/ 0 赞/ 551 阅读

相关 Vue - 条件渲染

Vue 中条件渲染一. v-if 和 v-show 二. v-if 和 v-else 三. v-if、v-else-if 和 v-else 四.

清疚/ 2021年07月25日 17:13/ 0 赞/ 634 阅读

相关 react 条件渲染

1、讲jsx内容放进数组里,然后{}解析,会自动去掉[ ]和",",展现数组内容 2、利用arr.map(function(item,index){return

朱雀/ 2021年07月24日 12:38/ 0 赞/ 598 阅读

相关 React官网学习实践 - 条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致，

Myth丶恋晨/ 2021年06月24日 16:11/ 0 赞/ 638 阅读