Footer组件背景异常问题：设置黑色背景仅作用于li标签文本而非整个Footer

看起来你遇到的核心问题是循环渲染了多个独立的<footer>元素——你在props.array.map里每次迭代都返回一个<footer>，这意味着数组里有多少条数据，就会生成多少个小footer，每个footer只包含单个<li>，所以黑色背景自然只会包裹单个列表项的文本区域，而不是一个完整的页脚组件。

另外，<ul>标签默认带有margin和padding，这也会让背景色的范围看起来不符合预期。

修改后的代码 #

function Footer(props) {
  console.log(props);
  return (
    // 把footer放在map外面，作为整个列表的容器
    <footer style={{ backgroundColor: "black", color: "blue", width: "100%" }}>
      <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
        {props.array.map((elem, index) => (
          // 给列表项添加唯一key（推荐用elem的唯一ID，这里先用index示例）
          <li key={index} style={{ marginLeft: "5%", padding: "8px 0" }}>
            {elem}
          </li>
        ))}
      </ul>
    </footer>
  );
}

关键改动说明 #

• 将<footer>移到循环外：现在整个列表都被包裹在一个<footer>容器中，背景色会应用到整个页脚区域，而不是每个列表项单独的小容器。
• 重置<ul>默认样式：去掉了ul默认的margin和padding，避免页脚出现不必要的留白；listStyle: "none"可以移除列表项前的圆点（如果需要保留圆点可以删掉这个属性）。
• 给<footer>设置宽度：添加width: "100%"确保页脚占满父元素的可用宽度。
• 优化<li>样式：添加padding: "8px 0"让列表项有上下间距，页脚高度会自适应内容，背景色也会完整覆盖整个页脚高度。
• 添加列表项key：React要求列表渲染时每个元素必须有唯一的key属性，避免控制台警告（如果你的数组元素有唯一ID，建议用ID代替index作为key）。

这样修改后，黑色背景就会覆盖整个Footer组件的区域，而不是仅仅包裹单个列表项的文本啦。

内容的提问来源于stack exchange，提问作者Kudah Shambare