React - Typescript - 如何充當另一個組件的道具

Question

共有三個組件Toggle、ToggleMenu、Wrapper

切換應該是通用的，並且用於不同的功能包裝器應該只在切換打開時改變背景顏色

問題是如何將負責更改顏色的功能傳遞給切換菜單，它在切換切換時執行

應用程序

import React from 'react';
import { Wrapper } from './containers/wrapper';
import { Button } from './components/buttons/button';
import { ToggleMenu } from './components/settings/settings';
 
const App = () => {
  return (
    <>
    <Wrapper>
        <Button />
        <ToggleMenu />
    </Wrapper> 
    </>
  )
}

export default App;

切換菜單

import styled from "styled-components";
import { Toggle } from "../buttons/toggle";
import { WrapperProps } from "../../containers/wrapper";
import { test } from "./test"

const SettingsContainer = styled.div`
  margin: auto;
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
`;

const Container = styled.div`
  height: 50%;
  width: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: lime;
`;

const TogCon = styled.div`
  margin: 0.5em;
`;

export const ToggleMenu = (props: WrapperProps) => {
  return (
    <SettingsContainer>
      <Container>
        <TogCon>
          <Toggle toggleText={"Dark mode"} onChange={props.handleTheme}/>
        </TogCon>
        <TogCon>
          <Toggle toggleText={"Sth"} onChange={() => {console.log("Sth")}}/>
        </TogCon> 
      </Container>
    </SettingsContainer>
  );
};

包裝器

import React, { useState } from "react";
import styled from "styled-components";

export type WrapperProps = {
  children?: React.ReactNode;
  color?: string;
  handleTheme?: () => void;
};

const Container = styled.div<WrapperProps>`
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  background-color: ${props => props.color }
`

export const Wrapper = ({ children }: WrapperProps) => {

  const [theme, setTheme] = useState("black")

  const handleTheme = () => {
    theme === "black" ? setTheme("white"): setTheme("black")
  }

  return(
    <Container 
      color={theme}
      handleTheme={handleTheme}
    > { children } 
    </Container>
  );
}

Answer 1

用React.cloneElement解決了

export const Wrapper = (props: WrapperProps) => {
    
      const [theme, setTheme] = useState("black")
    
      const handleTheme = () => {
        theme === "black" ? setTheme("white"): setTheme("black")
      }
    
      const childrenWithProps = React.Children.map(props.children, child => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, { handleTheme });
        }
        return child;
      });
    
      return(
        <Container color={theme} > 
          { childrenWithProps }
        </Container>
      );
      }