我正在学习在 React 上设计一个公告板应用程序,它在一个页面上显示多个“便利贴”。虽然组件正常工作,但我相信页面上的“注释”正在相互渲染。 Sticky Notes rendering over each other(left screen) .这是我的代码的 HTML、CSS 和 JavaScript 文件。 https://drive.google.com/open?id=0Bx_XCzMeXydQcm1pQ3Z6d3NOVXM
我不认为这是渲染多个组件的问题。如果我将 Note6.js 中 Board 组件的 render() 函数的第 86 行更改为以下内容:<h1 key={i}>{note}</h1>
并运行它,它以不同的行显示输出,我希望发生这种情况。(请参阅屏幕截图图像的右侧窗口)
请帮忙!
最佳答案
问题可能出在您为 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;
关于javascript - react : Child component not rendering correctly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37489913/