如何给两个孩子提供React组件和使用值？

// ParentComponent.js
import React from 'react';
import ChildComponentA from './ChildComponentA';
import ChildComponentB from './ChildComponentB';

const SharedComponent = () => <div>这是共享的组件</div>;

const ParentComponent = () => {
  const sharedValue = "这是共享的值";

  return (
    <div>
      <ChildComponentA component={SharedComponent} value={sharedValue} />
      <ChildComponentB component={SharedComponent} value={sharedValue} />
    </div>
  );
};

export default ParentComponent;

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

const ChildComponentA = ({ component: Component, value }) => {
  return (
    <div>
      <h2>子组件A</h2>
      <Component />
      <p>{value}</p>
    </div>
  );
};

export default ChildComponentA;

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

const ChildComponentB = ({ component: Component, value }) => {
  return (
    <div>
      <h2>子组件B</h2>
      <Component />
      <p>{value}</p>
    </div>
  );
};

export default ChildComponentB;

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

const SharedContext = createContext();

export const SharedProvider = ({ children }) => {
  const sharedValue = "这是共享的值";
  const sharedComponent = () => <div>这是共享的组件</div>;

  return (
    <SharedContext.Provider value={{ sharedValue, sharedComponent }}>
      {children}
    </SharedContext.Provider>
  );
};

export const useShared = () => useContext(SharedContext);

// ParentComponent.js
import React from 'react';
import { SharedProvider } from './SharedContext';
import ChildComponentA from './ChildComponentA';
import ChildComponentB from './ChildComponentB';

const ParentComponent = () => {
  return (
    <SharedProvider>
      <div>
        <ChildComponentA />
        <ChildComponentB />
      </div>
    </SharedProvider>
  );
};

export default ParentComponent;

// ChildComponentA.js
import React from 'react';
import { useShared } from './SharedContext';

const ChildComponentA = () => {
  const { sharedValue, sharedComponent } = useShared();

  return (
    <div>
      <h2>子组件A</h2>
      {sharedComponent()}
      <p>{sharedValue}</p>
    </div>
  );
};

export default ChildComponentA;

// ChildComponentB.js
import React from 'react';
import { useShared } from './SharedContext';

const ChildComponentB = () => {
  const { sharedValue, sharedComponent } = useShared();

  return (
    <div>
      <h2>子组件B</h2>
      {sharedComponent()}
      <p>{sharedValue}</p>
    </div>
  );
};

export default ChildComponentB;