如何从showModal函数中渲染React函数式组件UpdateModal？

你当前的写法存在问题——showModal是点击事件的处理函数，它的返回值不会被React渲染到页面上，直接在里面返回UpdateModal完全无效。正确的做法是用状态控制模态框的显示/隐藏，并把模态框放在父组件的JSX结构中，具体步骤如下：

1. 补充父组件的状态 #

在父组件里新增状态，用来存储当前要编辑的用户（因为UpdateModal需要接收user属性）：

const [currentUser, setCurrentUser] = useState<IUser | null>(null);
const [showUpdateModal, setShowUpdateModal] = useState(false);

2. 修改showModal函数 #

让它只负责更新状态，不需要返回任何组件：

const showModal = (user: IUser) => {
  // 存储要编辑的用户数据
  setCurrentUser(user);
  // 触发模态框显示
  setShowUpdateModal(true);
};

3. 在父组件的JSX中渲染UpdateModal #

把模态框放在父组件的渲染结构里，用showUpdateModal状态控制它的显示：

return (
  <>
    {/* 你的其他页面内容，比如用户列表、编辑按钮等 */}
    <button onClick={() => showModal(targetUser)}>编辑</button>

    {/* 直接渲染UpdateModal，由状态控制显示 */}
    <UpdateModal
      showUpdateModal={showUpdateModal}
      setShowUpdateModal={setShowUpdateModal}
      user={currentUser!} // 这里用!断言是因为showModal触发后currentUser一定有值
    />
  </>
);

4. 确保UpdateModal的Props类型正确 #

你的updateModalProps需要明确包含user属性：

interface updateModalProps {
  showUpdateModal: boolean;
  setShowUpdateModal: (value: boolean | ((prev: boolean) => boolean)) => void;
  user: IUser;
}

为什么原来的写法行不通？ #

React的渲染逻辑基于组件的JSX返回值和状态变化——事件处理函数的返回值不会被React纳入渲染流程，所以你在showModal里返回的<UpdateModal>根本不会被渲染到DOM中。必须通过状态变化让React重新渲染组件树，从而实现模态框的显示/隐藏。

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