React: Untergeordnete Komponente nicht korrekt rendern

Question

Ich lerne, eine Bulletin-Board-Anwendung auf React zu entwerfen, die mehrere "Haftnotizen" auf einer Seite zeigt. Während die Komponenten korrekt funktionieren, glaube ich, dass die "Notizen" auf der Seite übereinander gerendert werden. Sticky Notes rendering over each other(left screen). Hier ist die HTML-, CSS- und JavaScript-Datei meines Codes. https://drive.google.com/open?id=0Bx_XCzMeXydQcm1pQ3Z6d3NOVXM

Ich glaube nicht, dass es das Problem mit dem Rendern mehrerer Komponenten ist. Wenn ich Zeile 86 meiner render() -Funktion von Board Component in Note6.js wie folgt ändere: <h1 key={i}>{note}</h1> und es ausführen, wird die Ausgabe in verschiedenen Zeilen angezeigt, was hoffentlich passieren wird (siehe Screenshot des rechten Fensters)

Bitte helfen!

Answer 1

Problem ist wahrscheinlich Ihre Position, die Sie für die Note CSS-Klasse festlegen.

div.note { 
    height: 150px; 
    width: 150px; 
    background-color: yellow; 
    margin: 2px 0; 
    position: absolute; /* This line */ 
    cursor: -webkit-grab; 
    -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2); 
    box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, .2); 
} 

Versuchen position: absolute; auf etwas anderes, wie float: left;