如何通过更新子组件Props触发父子组件重渲染？附场景示例

核心逻辑说明 #

你提到的「父传子的Props无论在哪边更新，父子都会重渲染」的场景，本质是让共享状态（这里是项目列表items）成为触发重渲染的核心。你的场景里，子组件修改数据后只要更新Context中的items，依赖这个Context的父组件会自动重渲染——因为React Context的状态更新会触发所有订阅它的组件重渲染。

修正后的完整代码 #

修复原代码语法错误并完善逻辑：

import { useState } from 'react';
// 假设useStateValue是你通过Context创建的自定义Hook
const Parent = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [{ items }, dispatch] = useStateValue();

  // 绑定到项目的编辑按钮，打开模态框
  const openEditModal = () => {
    setIsOpen(true);
  };

  return (
    <div className="sidebar">
      {/* 渲染项目列表 */}
      {items.map((item, index) => (
        <div key={index} className="item">
          <p>{item.name}</p>
          <button onClick={openEditModal}>编辑</button>
        </div>
      ))}
      {/* 传递必要参数给子组件 */}
      <Child 
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        currentItem={items[0]} // 示例：传递当前要编辑的项目，实际需根据点击项动态传递
      />
    </div>
  );
};

const Child = ({ isOpen, onClose, currentItem }) => {
  const [newName, setNewName] = useState(currentItem?.name || '');

  const submitHandler = async () => {
    try {
      // 调用接口更新后台数据
      const updatedItem = await postRequest({
        id: currentItem.id,
        name: newName
      });
      // 通过Context的dispatch更新全局项目列表
      dispatch({
        type: 'UPDATE_ITEM',
        payload: updatedItem
      });
      // 关闭模态框
      onClose();
    } catch (err) {
      console.error('更新失败:', err);
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      footer={
        <>
          <button onClick={onClose}>取消</button>
          <button onClick={submitHandler}>提交</button>
        </>
      }
    >
      <input
        type="text"
        value={newName}
        onChange={(e) => setNewName(e.target.value)}
        placeholder="输入新项目名称"
      />
    </Modal>
  );
};

关键优化点 #

• 状态驱动重渲染：父组件订阅Context中的items，子组件通过dispatch更新items后，父组件会自动重渲染，展示最新的项目名称。
• 修复语法问题：修正了原代码中dispatch拼写错误、组件定义语法错误、isOpen参数缺失等问题。
• 规范数据流：将isOpen、关闭方法、当前编辑项等必要数据通过Props传递，符合React单向数据流规范。

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