反应：子组件未正确呈现答案

【问题标题】：React: Child component not rendering correctly反应：子组件未正确呈现
【发布时间】：2016-05-27 18:13:11
【问题描述】：

我正在学习在 React 上设计一个公告板应用程序，该应用程序在页面上显示多个“便笺”。虽然组件工作正常，但我相信页面上的“注释”是相互渲染的。 Sticky Notes rendering over each other(left screen)。这是我的代码的 HTML、CSS 和 JavaScript 文件。 https://drive.google.com/open?id=0Bx_XCzMeXydQcm1pQ3Z6d3NOVXM

我不认为这是渲染多个组件的问题。如果我将 Note6.js 中 Board Component 的 render() 函数的第 86 行更改为以下内容：<h1 key={i}>{note}</h1> 并运行它，它会以不同的行显示输出，我希望这会发生。（请参阅屏幕截图的右侧窗口)

请帮忙！

【问题讨论】：

您应该在此处添加代码以获得更好的结果，更好地创建 fiddle 以便其他人可以修改和更正它

标签： javascript html css reactjs

【解决方案1】：

问题可能是你为 note CSS 类设置的位置。

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);
}

尝试将position: absolute; 更改为其他内容，例如float: left;

【讨论】：