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

小咪咪 2023-06-11 10:22 13阅读 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 条评论，13人围观）

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

相关阅读

相关条件渲染、列表渲染

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

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

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

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

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

相关 react 条件渲染

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

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

相关 React学习之条件渲染

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

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

相关 vue条件渲染

v-if <head> <meta charset="UTF-8"> <title>条件渲染</title> <script src="js/vue

痛定思痛。/ 2022年05月25日 13:13/ 0 赞/ 300 阅读

相关 Vue条件渲染

Vue条件渲染 v-if v-else v-else-if 用 key 管理可复用的元素 v-show v-if vs v-show

谁践踏了优雅/ 2021年10月20日 00:26/ 0 赞/ 520 阅读

相关 Vue条件渲染

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

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

相关 Vue - 条件渲染

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

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

相关 react 条件渲染

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

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

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

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

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