如何呈现组件的子级而不是整个组件

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <div>
      <h1>父组件</h1>
      <<ChildComponent />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = () => {
  return (
    <div>
      <h2>子组件</h2>
      <p>这是子组件的内容。</p>
    </div>
  );
};

export default ChildComponent;

// 创建一个Context
import React from 'react';

const ChildComponentContext = React.createContext();

export default ChildComponentContext;

// 父组件
import React from 'react';
import ChildComponentContext from './ChildComponentContext';

const ParentComponent = () => {
  return (
    <div>
      <h1>父组件</h1>
      <ChildComponentContext.Provider value={<ChildComponent />}>
        {/* 其他父组件内容 */}
      </ChildComponentContext.Provider>
    </div>
  );
};

export default ParentComponent;

// 子组件
import React, { useContext } from 'react';
import ChildComponentContext from './ChildComponentContext';

const ChildComponent = () => {
  const childComponent = useContext(ChildComponentContext);

  return (
    <div>
      <h2>子组件</h2>
      <p>这是子组件的内容。</p>
      {childComponent}
    </div>
  );
};

export default ChildComponent;