réagir slidetoggle avec ce

Question

J'essaie d'obtenir slideToggle pour travailler avec React comme je l'ai fait avec jQuery, mais je suis incapable de comprendre comment le faire. J'ai une liste de différentes recettes, et pour ne pas rendre la page incroyablement longue, je veux cacher le contenu et ne montrer que le titre de chaque recette. Lorsque l'utilisateur clique sur l'en-tête, il affichera le contenu de cette recette particulière. Si vous cliquez de nouveau sur l'en-tête, le contenu en question sera masqué. Je veux utiliser le même className ('content') pour chaque contenu de recette, donc j'aurais besoin de "this" pour déterminer quel contenu je veux montrer. Comment puis-je faire cela dans React?

Dans jQuery Je l'ai travailler comme ça

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

mais après plusieurs essais dans React le meilleur que je suis arrivé était caché le dernier contenu avec l'exemple de cette page (React jQuery slideToggle)

Je n » étais pas t capable de faire fonctionner celui-ci, probablement le moyen de le faire fonctionner ..? react using jquery to slideToggle Je pense que c'est un peu démodé et pourrait être mieux fait de nos jours?

Answer 1

déclencheur fonction onClick sur titres

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

Answer 2

La ici réponse acceptée va bien travailler:

Implementing a Read More link in React.js

Sinon, vous pouvez étendre le texte en utilisant React Router Page Transition

Demo