【react】classname条件判断加类，多条件判断加类，两个类一个判断一个不判断

最新推荐文章于 2024-08-08 10:54:39 发布

杨不旧

最新推荐文章于 2024-08-08 10:54:39 发布

阅读量2.2k

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_45152044/article/details/125259995

版权

react 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

本文介绍如何使用React和ES6语法实现一个简单的元素隐藏/显示功能，通过比较四种不同的className设置方法，包括模板字符串、数组join、逻辑运算符和第三方库classnames。适合初学者理解JavaScript条件渲染在前端开发中的应用。

摘要由CSDN通过智能技术生成

例子描述

点击隐藏按钮，粉红色正方形消失。
点击显示按钮，粉红色正方形显示。

代码举例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <style>
        .myspan {
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
            opacity: 1;
            transition: opacity .3s linear;
        }
		.border {
            border: 3px solid red;
        }
        .hidden {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>

</html>

<script type="text/babel">

    class ComClass extends React.Component {
        constructor() {
            super();
            this.state = {
                isShow: true
            }
        }
        change() {
            this.setState({
                isShow: !this.state.isShow
            })
        }

        render() {
            return (
                <div>
                    <button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
                    <span className={[this.state.isShow ? '' : 'hidden', 'myspan'].join(' ')}></span>
                </div >
            )
        }
    }
    ReactDOM.render(<ComClass />, document.querySelector("#app"));
</script>

下文仅粘贴return里的代码。

classname里渲染多个类，不加判断

写法一：

return (
        <div>
           <button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
           <span className='hidden myspan'></span>
         </div >
)

写法二：

return (
        <div>
           <button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
           <span className={'hidden myspan'}></span>
         </div >
)

classname里渲染多个类，一个判断

写法一：

render() {
            return (
                <div>
                    <button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
                    <span className={[this.state.isShow ? '' : 'hidden', 'myspan'].join(' ')}></span>
                </div >
            )
}

写法二：

render() {
            return (
                <div>
                    <button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
                    <span className={`myspan ${this.state.isShow ? '' : 'hidden'}`}></span>
                </div >
            )
        }

写法三：

return (
         <div>
            <button onClick={this.change.bind(this)}>{this.state.isShow ? '隐藏' : '显示'}</button>
            <span className={this.state.isShow ? "myspan" : "myspan hidden"}></span>
         </div >
)