反应：子组件无法正确渲染

Question

我正在学习在React上设计一个公告板应用程序，该应用程序在页面上显示几个“粘滞便笺”。 当组件正常工作时，我相信页面上的“注释”是相互呈现的。 即时贴相互渲染（左屏幕） 。 这是我的代码的HTML，CSS和JavaScript文件。 https://drive.google.com/open?id=0Bx_XCzMeXydQcm1pQ3Z6d3NOVXM

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

请帮忙！

Answer 1

问题可能是您为笔记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;