React中点击用户按钮（随机/顺序）时如何正确显示底部消息Div

顺序点击User1、User2这类按钮时，页面底部能正常显示用户消息Div，但随机点击（比如User1、User6、User5）时，消息Div会散乱分布。需要实现：无论点击顺序如何，所有激活的用户消息Div都固定显示在页面底部。

问题根源 #

1. React渲染逻辑缺陷：当前代码遍历全部用户数组，每个用户对应一个contact_box容器——未点击的用户容器为空，但仍占据页面位置。随机点击时，这些空容器会把已激活的消息Div挤到上方，导致布局错乱。
2. CSS布局不合理：contact_box使用inline-block，空容器高度为0但仍占用水平空间，进一步加剧了位置偏移问题。

解决方案 #

1. 优化React渲染逻辑 #

只渲染**已激活（popStatus为true）**的用户消息容器，彻底避免空容器占位：

• 修改mainArea中的渲染代码，先过滤出激活状态的用户再渲染
• 修正popIt方法中直接修改state的错误（React禁止直接修改state，需创建数组副本）

2. 调整CSS布局 #

使用Flex布局替代inline-block，确保所有激活容器始终底部对齐，同时增加容器间距提升美观度。

完整修正代码 #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .mainArea {
      position: fixed;
      width: 80%;
      bottom: 0;
      display: flex;
      align-items: flex-end;
      gap: 5px;
    }
    .contact_box {
      width: 250px;
      background: black;
      color: red;
      border-radius: 5px 5px 0px 0px;
    }
    .sidebar {
      margin-bottom: 200px; /* 避免列表被底部fixed区域遮挡 */
    }
  </style>
</head>
<body>
  <script src="build/react.min.js"></script>
  <script src="build/react-dom.min.js"></script>
  <script src="build/browser.min.js"></script>
  <div id="app"></div>
  <script type="text/babel">
    class Application extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          arr: [
            { id: 1, name: "user1"},
            { id: 2, name: "user2"},
            { id: 3, name: "user3"},
            { id: 4, name: "user4"},
            { id: 5, name: "user5"},
            { id: 6, name: "user6"},
            { id: 7, name: "user7"},
            { id: 8, name: "user8"},
            { id: 9, name: "user9"},
            { id: 10, name: "user10"},
            { id: 11, name: "user11"},
            { id: 12, name: "user12"},
            { id: 13, name: "user13"},
            { id: 14, name: "user14"},
            { id: 15, name: "user15"}
          ],
        };
        this.popIt = this.popIt.bind(this);
      }

      popIt(id) {
        const updatedArr = [...this.state.arr];
        updatedArr[id].popStatus = true;
        this.setState({ arr: updatedArr });
      }

      render() {
        return (
          <div>
            <h3>List of users Records</h3>
            <div className="sidebar">
              <ul>
                {this.state.arr.map((obj, i) => (
                  <li key={obj.id}>
                    {obj.name} - {obj.name}
                    <button
                      type="button"
                      onClick={() => { this.popIt(i); }}
                    >
                      {obj.name}
                    </button>
                  </li>
                ))}
              </ul>
            </div>
            <div className="mainArea">
              {this.state.arr
                .filter(obj => obj.popStatus === true)
                .map((obj) => (
                  <div key={obj.id} className="contact_box">
                    <div>
                      <b>Username:</b> {obj.name}<br />
                      Message .........<br />
                      Message .........<br />
                      Message .........<br />
                      Message .........<br />
                      Message .........<br />
                      Message .........<br />
                    </div>
                  </div>
                ))}
            </div>
          </div>
        );
      }
    }
    ReactDOM.render(<Application />, document.getElementById('app'));
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Nancy Moore