前端踩坑(七)--------------------------react 動态操作className
文章目錄
-
- 前端踩坑(七)--------------------------react 動态操作className
-
-
- 問題描述：如何動态修改一個元素的CSS樣式呢？
-
- 一 , react 動态操作className
- 二 , 設定多個className
- 三 這是您如何使用react定義和使用内聯樣式的方法
問題描述：如何動态修改一個元素的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>
)
}
}