React 中滚动条未出现在 div 内

Question

我正在尝试在显示任务的特定 div (.thelist) 内的 React 应用程序中实现垂直滚动条。尽管设置了 Overflow-y: auto 和固定高度，滚动条要么不出现，要么任务溢出容器。

相关代码如下：

下面是我的 ListNote.js 组件：

function ListNote({ title, onDelete, onEdit, id }) {
      return (
        <div className="thelist">
            <div className='task-item'>
                <span className='task-name'>{title}</span>
                <div className='button-group'>
                    <button onClick={() => 
onEdit(id)}>Edit</button>
                    <button onClick={() => 
onDelete(id)}>Delete</button>
                </div>
            </div>
        </div>
    );
 }

CSS：

`.thelist {
    padding: 8px;
    height: 300px;
    overflow-y: auto;
}

.task-item {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: #8758ff;
    border-radius: 10px;
    padding: 5px 15px 5px 15px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3), 
    0 5px 15px rgba(0, 0, 0, 0.2);
    max-width: 80%;
    margin-left: auto; 
    margin-right: auto;

}

.任务名称{ 颜色：#fff； }`

我还有一个标题，其中包含应固定在顶部的标题。

Answer 1

滚动条未出现，因为

.thelist

容器正在包装每个单独的任务而不是整个任务列表。这意味着

.thelist

内没有溢出来触发滚动条。
要解决此问题，您应该移动

.thelist

div 以将所有

ListNote

组件一起包裹起来。

以下是修改代码的方法。

更新您的父组件以将所有任务包装在

.thelist

中：

function TaskList({ tasks, onDelete, onEdit }) {
  return (
    <div className="thelist">
      {tasks.map(task => (
        <ListNote
          key={task.id}
          title={task.title}
          id={task.id}
          onDelete={onDelete}
          onEdit={onEdit}
        />
      ))}
    </div>
  );
}

还有你的

ListNote

组件：

function ListNote({ title, onDelete, onEdit, id }) {
  return (
    <div className='task-item'>
      <span className='task-name'>{title}</span>
      <div className='button-group'>
        <button onClick={() => onEdit(id)}>Edit</button>
        <button onClick={() => onDelete(id)}>Delete</button>
      </div>
    </div>
  );
}