使用react将参数从一个组件传递到另一个组件

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Hello from Parent!";
  return (
    <div>
      <ChildComponent message={message} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      {props.message}
    </div>
  );
}

export default ChildComponent;

// ThemeContext.js
import React, { createContext, useContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const theme = "dark";
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ChildComponent from './ChildComponent';

function App() {
  return (
    <ThemeProvider>
      <ChildComponent />
    </ThemeProvider>
  );
}

export default App;

// ChildComponent.js
import React from 'react';
import { useTheme } from './ThemeContext';

function ChildComponent() {
  const theme = useTheme();
  return (
    <div style={{ backgroundColor: theme === "dark" ? "#333" : "#fff", color: theme === "dark" ? "#fff" : "#333" }}>
      Current Theme: {theme}
    </div>
  );
}

export default ChildComponent;