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

Question

我正在尝试为 React 应用程序创建一个“简单”的事件时间表。我正在使用 this Codepen寻找灵感。并非每天都有事件，有些日子的事件比其他日子多。

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

我不确定如何使用 JSX 和 React 组件等在 Codepen 或 JSFiddle 中显示此问题。我已经复制了代码 into this 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 已粘贴到上面的代码笔中。 Here's a screenshot对我来说是什么样的。 谢谢!

Answer 1

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