Reagieren toggle-Komponente
Ich habe diesen einfachen code unten. Wenn ich drücken Sie die Toggle-Taste der Komponente Kind sollte ein - /ausblenden, aber es ist nicht.
Muss ich neu Rendern etwas?
Ich will nicht zu Schalter in/out-eine CSS-Klasse, wechseln Sie einfach über einen Klick auf eine Schaltfläche
import React, {Component} from 'react';
let active = true
const handleClick = () => {
active = !active
}
class Parent extends React.Component {
render() {
return (
<div>
<OtherComponent />
{active && <Child />}
<button type="button" onClick={handleClick}>
Toggle
</button>
</div>
)
}
}
class Child extends React.Component {
render() {
return (
<div>
I am the child
</div>
)
}
}
class OtherComponent extends React.Component {
render() {
return (
<div>
I am the OtherComponent
</div>
)
}
}
- Mögliche Duplikate von ein-oder ausblenden element Reagieren
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie zu erhalten oder legen Sie es über den Staat:
Hinweis, dass mit diesem Ansatz werden Sie wieder:das ganze Rendern übergeordneten Komponente (sowie Ihrer Kinder).
Betrachten Sie mit einem anderen Ansatz, wenn Sie auf der Durchreise sind eine
prop
um die untergeordnete Komponente und machen wird es sich mit Inhalten auf dieser Grundlage prop (es machen kann eine leerediv
oder so).Es gibt eine Reihe von Bibliotheken, die machen diesen job einfach für Sie, wie reagieren-Zusammenbruch mit Animationen und so.
onClick
mitthis.
Sollten Sie nur verwenden
state
undprops
zum verwalten des app-Zustands.Also anstatt zu versuchen:
Alernatively, Sie könnte Verwendung
forceUpdate()
zu zwingen, eine re-Rendern, aber das ist dringend abgeraten: