本文详解 react 中 modal 组件无法显示动态标题和正文的常见原因及解决方案，通过状态结构优化、事件参数传递与条件渲染修复逻辑缺陷，确保点击侧边栏不同条目时准确展示对应内容。

本文详解 react 中 modal 组件无法显示动态标题和正文的常见原因及解决方案，通过状态结构优化、事件参数传递与条件渲染修复逻辑缺陷，确保点击侧边栏不同条目时准确展示对应内容。

在 React 应用中，使用模态框（Modal）展示动态内容是高频需求。但如示例代码所示，若将 selectedItem 简单定义为布尔值（useState(false)），后续却尝试访问 selectedItem.title 或 selectedItem.text，JavaScript 会报错或渲染空值——因为 false 是原始布尔类型，不具有属性。这是导致模态框“能弹出但内容为空”的根本原因。

正确的做法是让状态承载完整数据结构。我们应将 selectedItem 设计为一个对象，既能控制显隐，又能携带待展示的内容：

const [selectedItem, setSelectedItem] = useState({
  visible: false,
  title: null,
  text: null
});

接着，更新点击事件处理器，使其接收当前项的 title 和 text 并存入状态：

const handleTitleClick = (title, text) => {
  setSelectedItem({
    visible: true,
    title,
    text
  });
};

同时，关闭模态框的函数也需同步重置整个对象：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

const closeModal = () => {
  setSelectedItem({
    visible: false,
    title: null,
    text: null
  });
};

最后，在 JSX 中注意两点：

1. <p></p> 标签需绑定带参箭头函数（避免立即执行）；
2. Modal 的条件渲染应基于 selectedItem.visible，而非 selectedItem 本身：

{sidebarTitle.map((item, index) => (
  <div key={index}>
    <p onClick={() => handleTitleClick(item.title, item.text)}>
      {item.title}
    </p>
  </div>
))}
{selectedItem.visible && (
  <Modal
    title={selectedItem.title}
    text={selectedItem.text}
    closeModal={closeModal}
  />
)}

⚠️ 注意事项：

• 不要省略 key 属性（已正确使用 index，但更推荐用唯一 ID）；
• Modal 组件无需额外传入 className="modal"（类名已在组件内部样式中定义）；
• 若 sidebarTitle 数据量大或需深度嵌套，可考虑使用 useMemo 缓存映射结果以提升性能；
• 生产环境建议为 Modal 添加 aria-modal="true" 和焦点管理，增强无障碍支持。

通过以上重构，点击任意侧边栏标题即可精准触发对应内容的模态框，逻辑清晰、可维护性强，符合 React 状态驱动 UI 的最佳实践。