So ändern Sie den CSS-Stil in React: 1. Fügen Sie dynamisch eine Klasse mit Code wie „handleshow() {this.setState({display:true})}…“ hinzu. 2. Fügen Sie dynamisch einen Stil mit Code hinzu, z als „Klasse Demo erweitert Component{...}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, React18-Version, Dell G3-Computer.
Wie ändere ich den CSS-Stil in React? ?
Zwei Möglichkeiten, CSS-Stile in React dynamisch zu ändern
Die erste: dynamisch eine Klasse hinzufügen, auf die Schaltfläche klicken, um den Text als Demo ein- und auszublenden
import React, { Component, Fragment } from 'react';
import './style.css';
class Demo extends Component{
constructor(props) {
super(props);
this.state = {
display: true
}
this.handleshow = this.handleshow.bind(this)
this.handlehide = this.handlehide.bind(this)
}
render() {
return (
<Fragment>
{/*动态添加一个class来改变样式*/}
<p className={this.state.display?"active":"active1"}>你是我的唯一</p>
<button onClick={this.handlehide}>点击隐藏</button>
<button onClick={this.handleshow}>点击显示</button>
</Fragment>
)
}
handleshow() {
this.setState({
display:true
})
}
handlehide() {
this.setState({
display:false
})
}
}
export default Demo;CSS-Code:
.active{
display: block;
}
.active1{
display: none;
}Die zweite: dynamisch Fügen Sie einen Stil hinzu. Klicken Sie auf die Schaltfläche, um den Text als Demo anzuzeigen und auszublenden. Zusammenfassung: Verwenden Sie die Klasse, um den CSS-Stil zu ändern. Sie können mehrere sich dynamisch ändernde CSS-Attribute schreiben. Es sieht nicht überladen aus, aber wenn Sie Stil verwenden Wenn Sie mehrere CSS-Attribute schreiben, sieht es kompliziert aus. Dies sind alles persönliche Meinungen, bitte weisen Sie auf etwaige Mängel hin
Lernempfehlung: „
Video-Tutorial reagierenDas obige ist der detaillierte Inhalt vonSo ändern Sie den CSS-Stil in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
