时间戳

首页 > 解决方案 > 如何在 React 组件中修复列表样式计划的渲染

javascript - 如何在 React 组件中修复列表样式计划的渲染

问题描述

我正在尝试为 React 应用程序创建一个“简单”的事件时间表。我正在使用这个 Codepen来获得灵感。不是每天都有活动，有些日子的活动比其他日子多。

我终于能够为每个日期创建一个“日期”标题（在左侧），无需重复，然后在右侧为当天的所有事件显示一个时间块。但是，我无法让它正确渲染。我已经尝试了所有我能想到的填充、边距、对齐方式等。我还尝试将事物移入和移出不同的 div 以查看是否是问题所在。

我不确定如何使用 JSX 和 React 组件等在 Codepen 或 JSFiddle 中显示此问题。无论如何，我已将代码复制到此 Codepen 中——希望它足以传达问题。这是主要的相关部分：

  render() {
this.restructureData();
return (
  <div>
    <br></br>
    <h1>Availability</h1>
    {/* {this.renderTimeslots()} */}
    <div className="schedule-div">
      <ul className="main">{this.betterRenderTimeslots()}</ul>
    </div>
  </div>
);

  betterRenderTimeslots = () => {
const newObject = this.restructureData();
let allDays = [];
for (let date in newObject) {
  let onThisDay = (
    <>
      <h3>{date}</h3>
      <li className="events">
        <ul className="events-detail">
          {newObject[date].map(timeslot => {
            return (
              <li>
                {<span className="event-time">{timeslot.hour}:00</span>}
              </li>
            );
          })}
        </ul>
      </li>
    </>
  );
  allDays.push(onThisDay);
}
return allDays;

};

随附的 CSS 已粘贴到上面的 Codepen 中。这是我的屏幕截图。谢谢！

标签： javascripthtmlcssreactjs

解决方案

您的H3标头不在LI元素内，这就是它脱落的原因

推荐阅读