React中实现用户详情的按需显示与隐藏-js教程-PHP中文网

react中实现用户详情的按需显示与隐藏

本教程详细讲解如何在React应用中实现点击用户名时，仅显示对应用户的详细信息，并解决全局显示状态导致的所有卡片同时显示以及隐藏时出现边框的问题。通过引入局部状态管理和优化条件渲染逻辑，我们将构建一个高效且用户体验友好的组件交互方案。

在React开发中，我们经常会遇到需要根据用户交互动态显示或隐藏特定内容的需求。一个常见的场景是，当用户点击列表中的某个条目（例如用户名）时，只显示该条目的详细信息，而其他条目的详情则保持隐藏。然而，不恰当的状态管理和条件渲染方式可能会导致一些问题，比如所有相关内容同时显示/隐藏，或者在内容隐藏时仍然出现不必要的视觉元素（如边框）。

理解常见问题与原始代码分析

原始代码尝试通过一个全局的 show 状态来控制所有用户详情卡片的显示与隐藏。

// App.js 核心片段
export default function App() {
  const [show, setShow] = useState(false); // 全局显示状态

  const handleShow = () => { // 切换全局显示状态
    setShow((prevShow) => !prevShow);
  };

  return (
    <div className="App">
      {isLoaded && (
        <>
          <Users data={data} handleShow={handleShow} /> {/* Users组件传递同一个handleShow */}
          <Card data={data[0]} show={show} /> // 所有Card组件都接收同一个show状态
          <Card data={data[1]} show={show} />
          <Card data={data[2]} show={show} />
        </>
      )}
    </div>
  );
}

// Users.js 核心片段
const Users = (props) => {
  const { data, handleShow } = props;
  return (
    <div>
      <p style={{ cursor: "pointer" }} onClick={handleShow}> // 所有用户点击都触发同一个handleShow
        {data[0].name}
      </p>
      <p style={{ cursor: "pointer" }} onClick={handleShow}>
        {data[1].name}
      </p>
      <p style={{ cursor: "pointer" }} onClick={handleShow}>
        {data[2].name}
      </p>
    </div>
  );
};

// Card.js 核心片段
const Card = (props) => {
  const { data, show } = props;
  return (
    <div style={{ border: "1px solid black", textAlign: "center" }}> // 即使不显示内容，div和边框依然存在
      {show && (
        <>
          {" "}
          <h3>{data?.id}</h3>
          <h3>{data?.username}</h3>
          <h3>{data?.email}</h3>{" "}
        </>
      )}
    </div>
  );
};

登录后复制

从上述代码中，我们可以发现几个关键问题：

全局状态控制： App 组件中的 show 状态是全局的。当任何一个用户名被点击时，handleShow 函数都会切换这个全局状态，导致所有 Card 组件同时显示或隐藏，而不是单独控制。
硬编码渲染： App 组件和 Users 组件都硬编码了 data[0], data[1], data[2]，这使得组件不够灵活，无法处理动态数量的用户数据。
条件渲染不彻底： Card 组件在 show 为 false 时，虽然内部的内容 (<h3> 标签) 不会渲染，但外部的 div 元素及其 border 样式依然存在。这就是导致“黑线”问题的原因。

核心解决方案：局部状态与精确控制

要解决这些问题，我们需要引入更精细的状态管理策略，并优化组件的条件渲染逻辑。

步骤一：管理当前选中用户状态

在 App 组件中，我们需要一个状态来记录当前应该显示哪个用户的详细信息。我们可以使用 selectedUserId 来存储被选中用户的ID。

// App.js
import React, { useState, useEffect } from "react";
// 引入 Users 和 Card 组件
// import Users from "./Users"; // 假设在同一目录
// import Card from "./Card";   // 假设在同一目录

export default function App() {
  const [data, setData] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState(null); // 新增：存储当前选中用户的ID

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        if (!response.ok) {
          throw new Error("数据获取失败");
        }
        return response.json();
      })
      .then((usersData) => { // 将变量名改为usersData避免与组件的data props混淆
        setData(usersData);
        setIsLoaded(true);
      })
      .catch((error) => {
        console.error("获取用户数据时发生错误:", error);
        setIsLoaded(true); // 即使失败也标记为加载完成，防止无限加载状态
      });
  }, []);

  // 新增：处理用户点击事件，更新selectedUserId
  const handleUserClick = (userId) => {
    // 如果点击的是当前已选中的用户，则取消选中（隐藏）
    // 否则，选中新用户（显示）
    setSelectedUserId((prevSelectedUserId) =>
      prevSelectedUserId === userId ? null : userId
    );
  };

  return (
    <div className="App">
      {isLoaded ? ( // 使用三元运算符处理加载状态
        <>
          {/* 将 handleUserClick 传递给 Users 组件 */}
          <Users users={data} onUserSelect={handleUserClick} />

          {/* 动态渲染所有用户的Card组件 */}
          {data.map((user) => (
            <Card
              key={user.id} // 列表渲染时务必添加key
              userData={user}
              selectedUserId={selectedUserId} // 传递当前选中ID
            />
          ))}
        </>
      ) : (
        <div>加载中...</div> // 加载状态提示
      )}
    </div>
  );
}

登录后复制

步骤二：动态渲染用户列表并传递选中回调

Users 组件现在需要遍历所有用户并为每个用户渲染一个可点击的名称。点击时，它应该调用父组件传递下来的回调函数，并传入当前用户的ID。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

// Users.js
import React from "react";

const Users = (props) => {
  const { users, onUserSelect } = props; // 接收 users 和 onUserSelect

  return (
    <div>
      <h2>用户列表</h2>
      {users.map((user) => ( // 遍历所有用户
        <p
          key={user.id} // 列表渲染时务必添加key
          style={{ cursor: "pointer", fontWeight: 'bold' }}
          onClick={() => onUserSelect(user.id)} // 点击时调用onUserSelect并传入当前用户ID
        >
          {user.name}
        </p>
      ))}
    </div>
  );
};

export default Users;

登录后复制

步骤三：优化卡片组件的条件渲染

Card 组件现在将根据传入的 userData.id 是否与 selectedUserId 匹配来决定是否渲染其内容。关键在于，如果卡片不应该显示，它应该 完全不渲染任何DOM元素，而不是仅仅隐藏内部内容。

// Card.js
import React from "react";

const Card = (props) => {
  const { userData, selectedUserId } = props; // 接收 userData 和 selectedUserId

  // 判断当前卡片是否应该显示
  const shouldShow = userData.id === selectedUserId;

  // 如果不应该显示，则直接返回一个空片段，不渲染任何DOM元素
  if (!shouldShow) {
    return <></>; // 或者 return null;
  }

  // 如果应该显示，则渲染用户详情
  return (
    <div
      style={{
        border: "1px solid black",
        textAlign: "center",
        margin: "10px 0",
        padding: "10px",
        backgroundColor: "#f9f9f9",
      }}
    >
      <h3>ID: {userData?.id}</h3>
      <h3>用户名: {userData?.username}</h3>
      <h3>邮箱: {userData?.email}</h3>
    </div>
  );
};

export default Card;

登录后复制

完整代码示例

将上述修改整合到 App.js、Users.js 和 Card.js 中，即可实现所需功能。

App.js

import React, { useState, useEffect } from "react";
import Users from "./Users";
import Card from "./Card";
import "./App.css"; // 假设有App.css文件，或者直接使用内联样式

export default function App() {
  const [data, setData] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        if (!response.ok) {
          throw new Error("数据获取失败");
        }
        return response.json();
      })
      .then((usersData) => {
        setData(usersData);
        setIsLoaded(true);
      })
      .catch((error) => {
        console.error("获取用户数据时发生错误:", error);
        setIsLoaded(true);
      });
  }, []);

  const handleUserClick = (userId) => {
    setSelectedUserId((prevSelectedUserId) =>
      prevSelectedUserId === userId ? null : userId
    );
  };

  return (
    <div className="App">
      <h1>用户详情展示</h1>
      {isLoaded ? (
        <>
          <Users users={data} onUserSelect={handleUserClick} />

          {data.map((user) => (
            <Card
              key={user.id}
              userData={user}
              selectedUserId={selectedUserId}
            />
          ))}
        </>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
}

登录后复制

Users.js

import React from "react";

const Users = (props) => {
  const { users, onUserSelect } = props;

  return (
    <div>
      <h2>用户列表</h2>
      {users.map((user) => (
        <p
          key={user.id}
          style={{ cursor: "pointer", fontWeight: 'bold', color: '#007bff' }}
          onClick={() => onUserSelect(user.id)}
        >
          {user.name}
        </p>
      ))}
    </div>
  );
};

export default Users;

登录后复制

Card.js

import React from "react";

const Card = (props) => {
  const { userData, selectedUserId } = props;

  const shouldShow = userData.id === selectedUserId;

  if (!shouldShow) {
    return <></>;
  }

  return (
    <div
      style={{
        border: "1px solid #ddd",
        borderRadius: "8px",
        textAlign: "center",
        margin: "15px 0",
        padding: "15px",
        backgroundColor: "#fefefe",
        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
      }}
    >
      <h3>ID: {userData?.id}</h3>
      <h3>用户名: {userData?.username}</h3>
      <h3>邮箱: {userData?.email}</h3>
    </div>
  );
};

export default Card;

登录后复制

注意事项与最佳实践

状态提升（Lifting State Up）： 当多个子组件需要共享或根据同一份数据进行更新时，将状态提升到它们最近的共同父组件中。在本例中，selectedUserId 状态被提升到 App 组件，因为它需要被 Users 组件用来触发更新，同时也被 Card 组件用来决定是否显示。
彻底的条件渲染： 使用 return null; 或 return <></>; 来实现组件的完全移除，而不是仅仅通过 CSS display: none; 或条件渲染内部内容。这可以避免不必要的DOM元素被渲染，从而解决如“黑线”这样的视觉问题，并可能带来轻微的性能提升。
动态渲染列表： 使用 Array.prototype.map() 方法来动态渲染列表项，而不是硬编码。这使得组件能够灵活地处理任意数量的数据。
key 属性的重要性： 在渲染列表时，务必为每个列表项提供一个唯一的 key 属性。这有助于React高效地更新列表，提高性能并避免潜在的bug。
用户体验： 在 handleUserClick 中，我们实现了点击已选中的用户再次隐藏其详情的功能，这提供了更好的用户体验。
错误处理和加载状态： 在数据获取时加入错误处理 (.catch) 和加载状态 (isLoaded)，可以提升应用的健壮性和用户体验。

总结

通过上述优化，我们成功解决了在React中点击用户名时，所有用户详情同时显示以及隐藏时出现边框的问题。核心在于将全局的显示状态替换为针对单个用户ID的选中状态，并结合彻底的条件渲染来精确控制每个 Card 组件的可见性。这种模式在React开发中非常常见且实用，能够帮助我们构建出更具交互性和稳定性的应用。

以上就是React中实现用户详情的按需显示与隐藏的详细内容，更多请关注php中文网其它相关文章！