Heim >Web-Frontend >js-Tutorial >So steuern Sie das Anzeigen und Ausblenden in React
Methoden zum Steuern der Anzeige und des Ausblendens in React: 1. Steuern Sie, ob Elemente über Statusvariablen gerendert werden sollen. 2. Steuern Sie das Anzeigeattribut über den Stil. 3. Wechseln Sie den Klassennamen dynamisch.
Die Betriebsumgebung dieses Tutorials: Windows7-System, React17-Version, Dell G3-Computer.
Methoden zum Steuern der Anzeige und des Ausblendens in React:
1. Verwenden Sie Statusvariablen, um zu steuern, ob Elemente gerendert werden sollen.
Ähnlich wie bei Vues v-if
v-if
方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的。
class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:true } } render(){ return ( <div> { this.state.isShow?( <div>显示的元素</div> ):null } </div> ) } }
2、通过 style控制 display 属性
类似于 vue 中的 v-show
class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:'none' } } render(){ return ( <div style={{display:this.state.isShow}}>显示的元素</div> ) } }2. Steuern Sie das Anzeigeattribut über den StilÄhnlich wie
v-show
in vueSteuern Sie das Anzeigen und Ausblenden von Elementen über das Anzeigeattribut🎜Verwandte kostenlose Lernempfehlungen: 🎜Javascript🎜(Video)🎜🎜//.css文件 .is-show{ display:none } //.js文件 class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:true } } render(){ return ( <div> // 写法一 <div className={this.state.isShow?'old':'old is-show'}>显示的元素</div> // 写法二 <div className={`${this.state.isShow?'':'is-show'} old`}>显示的元素</div> </div> ) } }3. Wechseln Sie dynamisch den Klassennamen Übergeben Sie className, um den Klassennamen so umzuschalten, dass Elemente angezeigt und ausgeblendet werden.
rrreee
Das obige ist der detaillierte Inhalt vonSo steuern Sie das Anzeigen und Ausblenden in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!