React中如何通过子组件Switch状态重新渲染另一子组件

要实现这个需求，核心思路是状态提升——把Switch的状态托管在父组件中，通过props将状态和更新方法传递给子组件。当Switch值改变时，父组件的状态更新会触发所有依赖该状态的子组件重新渲染。

以下是完整的代码示例（基于React函数组件）：

import { useState } from 'react';

// 带Switch的子组件
function SwitchComponent({ value, onChange }) {
  return (
    <label>
      <input
        type="checkbox"
        checked={value}
        onChange={(e) => onChange(e.target.checked)}
      />
      切换状态
    </label>
  );
}

// 需要被重新渲染的子组件
function TargetComponent({ switchStatus }) {
  // 可根据switchStatus编写差异化渲染逻辑
  return (
    <div>
      当前Switch状态：{switchStatus ? '已开启' : '已关闭'}
      {/* 每次switchStatus变化，该组件会自动重新渲染 */}
    </div>
  );
}

// 父组件
function ParentComponent() {
  // 父组件统一维护Switch的状态
  const [switchStatus, setSwitchStatus] = useState(false);

  return (
    <div>
      <SwitchComponent 
        value={switchStatus} 
        onChange={setSwitchStatus} 
      />
      <TargetComponent switchStatus={switchStatus} />
    </div>
  );
}

export default ParentComponent;

关键逻辑说明： #

• 父组件通过useState创建switchStatus状态，作为两个子组件的统一数据源
• SwitchComponent接收父组件传递的value和onChange，负责响应用户操作并触发父组件的状态更新
• TargetComponent依赖父组件传递的switchStatus props，当该值变化时，React会自动触发组件重新渲染

如果使用类组件，逻辑完全一致：将状态存在父组件的this.state中，通过this.props传递给子组件，子组件调用父组件的setState方法更新状态，进而触发另一个子组件重新渲染。

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