React：如何将TriggerView组件的show状态和setShow方法传递给其子组件

嗨，我来帮你搞定这个问题！你现在的情况是TriggerView里的show状态和setShow方法没法直接传给它的两个子组件Trigger和View——因为这俩组件目前是完全独立的，和父组件的状态没有关联。这里有两个实用的方案，我给你详细讲讲：

方案一：使用React Context（推荐） #

这是最适合你这种组件组合场景的方法，Context能让关联组件轻松共享状态，不用一层一层手动传递props。

步骤1：创建Context #

首先我们需要定义一个Context，用来存放要共享的状态和方法：

import { createContext, useContext, useState, ReactNode } from 'react';

// 创建Context，指定类型，默认值设为null
const TriggerViewContext = createContext<{
  show: boolean;
  setShow: (value: boolean) => void;
} | null>(null);

步骤2：在TriggerView中提供Context #

修改你的TriggerView组件，用Context的Provider包裹子元素，把show和setShow作为value传递进去：

export const TriggerView = ({ children }: { children: ReactNode }) => {
  const [show, setShow] = useState(false);
  
  return (
    <TriggerViewContext.Provider value={{ show, setShow }}>
      {children}
    </TriggerViewContext.Provider>
  );
};

步骤3：在Trigger和View中消费Context #

更新Trigger和View组件，用useContext获取Context里的状态和方法，同时可以加个判断确保它们在TriggerView内部使用：

const Trigger = ({ children }: { children: ReactNode }) => {
  const context = useContext(TriggerViewContext);
  // 防止组件在TriggerView外部使用时报错
  if (!context) {
    throw new Error('Trigger组件必须在TriggerView组件内部使用');
  }
  const { show, setShow } = context;
  
  // 举个例子：点击Trigger切换show状态
  return (
    <div onClick={() => setShow(!show)}>
      {children}
    </div>
  );
};

const View = ({ children }: { children: ReactNode }) => {
  const context = useContext(TriggerViewContext);
  if (!context) {
    throw new Error('View组件必须在TriggerView组件内部使用');
  }
  const { show } = context;
  
  // 根据show状态决定是否渲染内容
  return show ? <div>{children}</div> : null;
};

步骤4：挂载子组件到TriggerView #

最后还是保持你原来的写法，把两个子组件挂载到TriggerView上：

TriggerView.Trigger = Trigger;
TriggerView.View = View;

这样一来，只要Trigger和View在TriggerView的包裹范围内，就能直接拿到状态和方法，就算它们嵌套在其他组件里也没问题，非常灵活！

方案二：通过React.cloneElement传递props #

如果你的场景比较简单（比如Trigger和View直接作为TriggerView的子元素，没有深层嵌套），也可以用React.cloneElement来给子组件手动传递props：

修改TriggerView组件 #

export const TriggerView = ({ children }: { children: ReactNode }) => {
  const [show, setShow] = useState(false);
  
  // 遍历子元素，给Trigger和View传递props
  const enhancedChildren = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      // 判断子组件是否是我们定义的Trigger或View
      if (child.type === Trigger || child.type === View) {
        return React.cloneElement(child, { show, setShow });
      }
    }
    return child;
  });
  
  return <div>{enhancedChildren}</div>;
};

更新Trigger和View的props类型 #

const Trigger = ({ children, show, setShow }: { 
  children: ReactNode;
  show: boolean;
  setShow: (value: boolean) => void;
}) => {
  return (
    <div onClick={() => setShow(!show)}>
      {children}
    </div>
  );
};

const View = ({ children, show }: { 
  children: ReactNode;
  show: boolean;
}) => {
  return show ? <div>{children}</div> : null;
};

这种方法的局限是：如果Trigger或View嵌套在其他组件里面，就没法通过这种方式传递props了，所以Context是更通用的选择。

备注：内容来源于stack exchange，提问作者WD_Abdulrahman