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

js源码：

import React, { Component } from 'react';

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

class AddUser extends Component {

    constructor(props) {

        super(props);

        this.state = {role: 1,

        };

    }

扫描二维码关注公众号，回复： 8666131 查看本文章

    /**

     * 主体

     */

    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