React: Trigger Aktionen aus der Klasse

Question

Wir schreiben unser currentexpress/jade-frontend um reactjs um. In unserem aktuellen Frontend haben wir Klassen, die Aktionen auslöst, zum Beispiel eine Bootstrap-modal anzuzeigen, wie folgt aus:

$(document).on('click', '.showUserInfo', function(event) { 
    $('#modal-userInfo').modal('show'); 
}); 

Wir haben diese Klassen auf zufällige Elemente (div/Tasten/html) in der Lösung. Das Element, das die Aktion auslöst, ist unterschiedlich, aber die Aktion ist die gleiche.

Konzeptionell habe ich eine schwere Zeit zu verstehen, wie Sie dies in React tun würden. Ich könnte eine Komponente mit dem modalen Element erstellen und damit Elemente umhüllen (d. H. Anstatt die Klasse I mit der neuen Komponente zu umbrechen). Aber würde das nicht zusätzliche Elemente um die umwickelte Komponente erzeugen? Und würde es das Modal nicht an mehreren Stellen um den Code herum erzeugen?

Answer 1

Erstellen Sie eine Komponente, die zum Umhüllen anderer Elemente verwendet werden kann.

Wenn Sie Flux verwenden, stellen Sie sicher, dass Sie über einen entsprechenden Aktionsersteller verfügen, der eine modale Aktion für die Anzeige auslöst.

Dann wickeln Sie andere React-Komponenten in dieser neuen Komponente ein, um ihnen dieses Verhalten zu geben.

<ShowUserInfo> 
    <ProfilePicture /> 
</ShowUserInfo> 
<Username />