React组件重复使用失败：仅渲染单个元素如何解决？

嘿，我帮你定位到问题啦！你页面只显示单个Todo组件的核心原因是Bootstrap浮动类导致的父元素高度塌陷。

问题分析 #

你的Todo组件里，<i>和<input>分别用了float-left和float-right类——这类浮动样式会让元素脱离正常文档流，而外层的<h3>标签没有任何清除浮动的处理，导致每个<h3>的实际高度被压缩为0（因为内部浮动元素不占文档流高度）。三个Todo组件的<h3>就会重叠在一起，视觉上看起来只显示了一个。

解决方案（三种可选，推荐前两种） #

方案1：用Bootstrap自带的clearfix类修复浮动塌陷

直接给<h3>添加clearfix类，这个类是Bootstrap专门用来处理浮动父元素高度塌陷的：

// Todo.js 文件修改后的render部分
render() {
  return (
    <h3 className="text-dark text-center p-1 bg-light clearfix">
      <i className="fas fa-times-circle fa-sm float-left mr-1 text-danger"></i>
      Task {this.props.num}
      <input type="checkbox" className="mr-2 float-right"/>
    </h3>
  )
}

方案2：改用Flex布局替代浮动（更推荐的现代写法）

放弃浮动，用Bootstrap的Flex布局类来实现左右对齐，既不会有塌陷问题，布局也更灵活：

// Todo.js 文件修改后的render部分
render() {
  return (
    <h3 className="text-dark p-1 bg-light d-flex justify-content-between align-items-center">
      <i className="fas fa-times-circle fa-sm text-danger"></i>
      Task {this.props.num}
      <input type="checkbox" className="mr-2"/>
    </h3>
  )
}

这里d-flex把h3变成flex容器，justify-content-between让子元素分别靠左右两端，align-items-center让元素垂直居中，完美替代浮动的效果，还避免了塌陷问题。

方案3：手动添加清除浮动的CSS

如果不想改Bootstrap类，可以在全局样式里给包含浮动元素的父元素添加清除浮动的伪元素：

/* 全局样式文件中添加 */
.bg-light::after {
  content: "";
  display: table;
  clear: both;
}

内容的提问来源于stack exchange，提问作者Dimuthu Lakmal