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

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

文章目录

    • 前端踩坑(七)--------------------------react 动态操作className
        • 问题描述:如何动态修改一个元素的CSS样式呢?
    • 一 , react 动态操作className
    • 二 , 设置多个className
    • 三 这是您如何使用react定义和使用内联样式的方法

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

  1. jquery:如果只是写一个简单的页面,用jquery是最方便的方法。只要用jquery中的选择器就可以便捷地选中任何一个页面元素,对其style进行修改十分简单。
  2. 原生JS:就算是用原生的JavaScript,也可以通过document.getElementById("")来选中该元素,从而修改样式。
  3. 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中也很简单,但是因为对基础知识没有系统的学习,所以入坑了。下面展示最后自己总结的两个方法,日后再有更好的方法时再进行总结。


前端踩坑(七)--------------------------react 动态操作className_第1张图片

方案一:(改变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>
其实。这个过程没有什么难度,但是因为将
 
写成
而出现了很多错误,以至于以为不能直接操纵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>
        )
    }
}

你可能感兴趣的