前端踩坑(七)--------------------------react 动态操作className

最新推荐文章于 2024-06-07 18:06:58 发布

小李科技

最新推荐文章于 2024-06-07 18:06:58 发布

阅读量8k

点赞数 1

前端踩坑专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前端踩坑(七)--------------------------react 动态操作className

文章目录

问题描述：如何动态修改一个元素的CSS样式呢？

jquery：如果只是写一个简单的页面，用jquery是最方便的方法。只要用jquery中的选择器就可以便捷地选中任何一个页面元素，对其style进行修改十分简单。
原生JS：就算是用原生的JavaScript，也可以通过document.getElementById("")来选中该元素，从而修改样式。
react：在react中，因为核心思想是将页面元素组件化，把组件看成是一个状态机，因此需要通过控制状态的变化来实现。

作者：我不是小叮当

链接：https://www.jianshu.com/p/8b9c697509cb

来源：简书

一 , react 动态操作className

https://blog.csdn.net/qq_28002139/article/details/77005840

最近刚开始学习react.js 要直接应用到公司的项目中，所以入得坑甚至是走的弯路数不胜数，不管是多么复杂的还是多么白痴的坑，现在一一记录下来。

如下图，是其中一个设置性别的页面效果图，按照jQuery的写法就是绑定点击事件并且XX.addClass(‘XX’).siblings().removeClass(‘XX’);其实在react中也很简单，但是因为对基础知识没有系统的学习，所以入坑了。下面展示最后自己总结的两个方法，日后再有更好的方法时再进行总结。

方案一：（改变style）

<body>
<div class="page mine_memberInfo_sexPage" id="mineMemberInfoSexPage"></div>
</body>

<script type="text/babel">

    var SexSelect = React.createClass({
        getInitialState: function () {
            return{
                sex:"male"
            }
        },
        manItemClick:function () {
            this.setState({
                sex:"male"
            })
        },
        femaleItemClick:function () {
            this.setState({
                sex:"female"
            })
        },
        render: function () {
            var sexActiveStyle = {
                backgroundImage: "url('img/images/mine_memberInfo_sex_gou.png')",
                backgroundSize: "13px 10px",
                backgroundRepeat: "no-repeat",
                backgroundPosition: "right center"
            };
            var man = {
                width: "100%",
                padding: "6% 0",
                borderBottom: "1px solid #efeff4"
            };
            var female ={
                width: "100%",
                padding: "6% 0",
            };
            var sex = this.state.sex;
            return(
                    <div className="container">
                        <div className="sexSelectWrap">
                            <div className="man" style ={sex == "male" ? sexActiveStyle: man } onClick={this.manItemClick}>
                                <div>男</div>                                
                            </div>
                            <div className="female" style ={sex == "female" ? sexActiveStyle: female} onClick={this.femaleItemClick}>                           
                            	<div>女</div>                                
                            </div>
                        </div>
                        <button>确定</button>
                    </div>
            )
        }
    });
    ReactDOM.render(
        <SexSelect/>,
        document.getElementById("mineMemberInfoSexPage")
    )
</script>

方案二：（直接操纵className）

<body>
<div class="page mine_memberInfo_sexPage" id="mineMemberInfoSexPage"></div>
</body>

<script type="text/babel">

    var SexSelect = React.createClass({
        getInitialState: function () {
            return{
                sex:"male"
            }
        },
        manItemClick:function () {
            this.setState({
                sex:"male"
            })
        },
        femaleItemClick:function () {
            this.setState({
                sex:"female"
            })
        },
        render: function () {
            var sex = this.state.sex;
            return(
                    <div className="container">
                        <div className="sexSelectWrap">
                            <div className={sex == "male" ? "man sexActive": "man"}  onClick={this.manItemClick}>
                                <div>男</div>                               
                            </div>                                                  
 			    <div  className={sex == "female" ? "female sexActive": "female"}  onClick={this.femaleItemClick}>
<div>女</div>
			    </div> 
			</div> 
			<button>确定</button> 
		   </div> 
	   ) 
       } 
   }); 
   ReactDOM.render( 
        <SexSelect/>, 
	document.getElementById("mineMemberInfoSexPage") 
   )
</script>
其实。这个过程没有什么难度，但是因为将
 <div  className={sex == "female" ? "female sexActive": "female"}  onClick={this.femaleItemClick}>
写成
 <div  className=“sex == "female" ? female sexActive: female“  onClick={this.femaleItemClick}>
而出现了很多错误，以至于以为不能直接操纵className

二 , 设置多个className

https://blog.csdn.net/qq_35605231/article/details/84974029

在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。

比如说有一个固定样式"title":

<div className="title">标题</div>，

然后还要一个点击高亮的样式:

<div className={index === this.state.active ? "active" : null}>标题</div>

不能这样写：

<div className="title" className={index === this.state.active ? "active" : null}>标题</div>

方法一：ES6 模板字符串 ``

className={`title ${index === this.state.active ? 'active' : ''}`}

方法二：join("")

className={["title", index === this.state.active?"active":null].join(' ')}

方法三：classnames(需要下载classnames)

const classNames = require('classnames');
 
const Button = React.createClass({
  // ...
  render () {
    const btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
});
个人喜好 第二种，一方面代码量少，另一方面方便对 className数组的增加与删除。

三这是您如何使用react定义和使用内联样式的方法

/**
 * Style definitions.
 */
const STYLE = {
    infoColor: {
        color: 'green'
    },
    warningColor: {
        color: 'orange'
    },
    errorColor: {
        color: 'red'
    }
};

/**
 * Component
 */
class Welcome extends React.Component {

    /**
     * Rendering into the DOM.
     */
    render() {
        return (
            <div>
                <h2 style={STYLE.infoColor}>Welcome!</h2>
        )
    }
}

小李科技

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端踩坑(七)--------------------------react 动态操作className

前端踩坑(八)--------------------------react 动态操作className文章目录前端踩坑(八)--------------------------react 动态操作className问题描述：如何动态修改一个元素的CSS样式呢？一 , react 动态操作className二 , 设置多个className三这是您如何使用react定义和使用内联样式的方法问...
复制链接

扫一扫