React中如何将子组件的布尔useState状态传递给祖父组件

核心思路是状态提升：把控制祖父组件元素显示的状态放在祖父组件本身，然后通过props层层传递修改状态的回调函数，让子组件触发这个回调来改变祖父组件的状态，从而实现无刷新控制元素显示隐藏。

修改后的组件代码如下： #

祖父组件（GrandParent.tsx）

import React, { useState } from 'react';
import { Parent } from './Parent';

type GrandParentProps = {
  // 按需添加你的组件props定义
};

export const GrandParent = ({ ...props }: GrandParentProps) => {
  // 初始值设为true，满足标题默认显示的需求
  const [showTitle, setShowTitle] = useState(true);

  // 定义修改状态的回调函数，传给子组件链
  const handleHideTitle = () => {
    setShowTitle(false);
  };

  return (
    <>
      {/* 根据showTitle状态控制标题显示 */}
      {showTitle ? <h1>show this title</h1> : null}
      {/* 将回调函数传递给父组件 */}
      <Parent onHideTitle={handleHideTitle} />
    </>
  );
};

父组件（Parent.tsx）

import React from 'react';
import { Child } from './Child';

// 明确接收来自祖父组件的回调函数
type ParentProps = {
  onHideTitle: () => void;
};

export const Parent = ({ onHideTitle }: ParentProps) => {
  // 直接将回调传递给子组件，作为中间传递层
  return <Child onHideTitle={onHideTitle} />;
};

子组件（Child.tsx）

import React from 'react';

// 接收来自父组件的回调函数
type ChildProps = {
  onHideTitle: () => void;
};

export const Child = ({ onHideTitle }: ChildProps) => {
  const handleClick = () => {
    // 点击按钮时触发回调，直接修改祖父组件的状态
    onHideTitle();
  };

  return (
    <button onClick={handleClick}>on click hide title</button>
  );
};

额外说明： #

如果你的子组件需要本地使用点击状态（比如切换按钮文本），可以保留子组件的useState，修改子组件如下：

import React, { useState } from 'react';

type ChildProps = {
  onHideTitle: (value: boolean) => void;
};

export const Child = ({ onHideTitle }: ChildProps) => {
  const [click, setClick] = useState(true);

  const handleClick = () => {
    const newState = !click;
    setClick(newState);
    // 将最新状态传递给祖父组件
    onHideTitle(newState);
  };

  return (
    <button onClick={handleClick}>
      {click ? 'on click hide title' : 'on click show title'}
    </button>
  );
};

同时需要同步修改祖父组件的handleHideTitle函数，接收布尔值参数：

const handleHideTitle = (value: boolean) => {
  setShowTitle(value);
};

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