reagiere sluttoggle mit dieser

Question

Ich versuche, SlideToggle mit React wie mit jQuery arbeiten zu arbeiten, aber ich bin nicht in der Lage, herauszufinden, wie es geht. Ich habe eine Liste von verschiedenen Rezepten, und um die Seite nicht unglaublich lang zu machen, möchte ich den Inhalt ausblenden und nur die Überschrift jedes Rezepts anzeigen. Wenn der Benutzer auf die Überschrift klickt, wird der Inhalt für dieses bestimmte Rezept angezeigt. Wenn die Überschrift erneut angeklickt wird, wird der bestimmte Inhalt ausgeblendet. Ich möchte denselben className ('content') für jeden Rezept-Inhalt verwenden, also würde ich "this" benötigen, um zu bestimmen, welchen Inhalt ich zeigen möchte. Wie kann ich das in React tun?

In jQuery habe ich es mag diese Arbeit

$("h2").click(function(){ 
    $(this).siblings('.content').slideToggle('slow'); 
}); 

aber nach einigen Tests in React das Beste, was ich mit dem Beispiel den letzten Inhalt auf dieser Seite bekam versteckte (React jQuery slideToggle)

I wasn‘ t in der Lage, diese eine Arbeit zu bekommen, wahrscheinlich die Art, dies zu arbeiten ..? react using jquery to slideToggle Ich denke, das ist etwas veraltet und könnte heute besser gemacht werden?

Answer 1

Auslöser eine onClick Funktion auf Schriften

onClickHeading() { 
    $("h2").click(() => { 
    $(this).siblings('.content').slideToggle('slow') 
    }); 
} 

Answer 2

Die akzeptierte Antwort hier wird gut funktionieren:

Implementing a Read More link in React.js

Alternativ können Sie den Text erweitern konnte mit React Router Page Transition

Demo