react 组件的显示和隐藏

默默yyds

于 2024-10-02 01:09:37 发布

阅读量173

点赞数 6

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/donghaimomo/article/details/142676726

版权

使用三元表达式判断display的值，或者使用三元判断是否创建元素

// import React from 'react'

function ShowOrHide() {

    const people = [
        {
            id: 1,
            name: '小新',
            gender: '男'
        }, {
            id: 2,
            name: '派蒙',
            gender: '女'
        }, {
            id: 3,
            name: '小葵',
            gender: '女'
        }
    ]




    // 控制一个组件的显示和隐藏
    return (
        <div>
            <ul>
                {/* 属性隐藏，但属性存在 */}
                {people.map((item) => {
                    return (
                        <li className={item.gender == '女' ? 'a nv' : 'a'} key={item.id} style={{
                            color: (item.gender == '女' ? 'red' : 'blue'),
                            // display: (item.gender == '女' ? 'none' : '')
                        }}>
                            {item.name}---{item.gender}
                        </li>
                    );
                })}
            </ul>

            <hr />

            <ul>
                {/* 属性隐藏不生成，不存在 */}
                {people.map((item) => (
                    item.gender == '女' ? <li key={item.id} >{item.name}</li> : null
                ))}
            </ul>
        </div>
    )
}





export default ShowOrHide

学习中......