本文详解 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
});
};
同时，关闭模态框的函数也需同步重置整个对象：
const closeModal = () => {
setSelectedItem({
visible: false,
title: null,
text: null
});
};
最后，在 JSX 中注意两点：
-
<p></p>标签需绑定带参箭头函数（避免立即执行）； - 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}"></modal>
)}
⚠️ 注意事项：
- 不要省略
key属性（已正确使用index，但更推荐用唯一 ID）； -
Modal组件无需额外传入className="modal"（类名已在组件内部样式中定义）； - 若
sidebarTitle数据量大或需深度嵌套，可考虑使用useMemo缓存映射结果以提升性能； - 生产环境建议为 Modal 添加
aria-modal="true"和焦点管理，增强无障碍支持。
通过以上重构，点击任意侧边栏标题即可精准触发对应内容的模态框，逻辑清晰、可维护性强，符合 React 状态驱动 UI 的最佳实践。
