我將 Gatsby 與 MDX 插件一起使用。所以我可以在 markdown 中使用 React 組件。沒關(guān)系。我有組件，互相交談。為此，我使用提升狀態(tài)向上模式。沒關(guān)系。這是一個基本的 Counter 示例，用于展示我的概念驗證代碼。import React from "react"export class Counter extends React.Component {  constructor(props) {    super(props)    this.state = { count: 0 }    this.handleCounterUpdate = this.handleCounterUpdate.bind(this)  }  handleCounterUpdate() {    this.setState({ count: this.state.count + 1 })  }  render() {    const children = React.Children.map(this.props.children, child => {      const additionalProps = {}      additionalProps.count = this.state.count      additionalProps.handleCounterUpdate = this.handleCounterUpdate      return React.cloneElement(child, additionalProps)    })    return <div>{children}</div>  }}export function Display({ count }) {  return <h2>Current counter is: {count}</h2>}export function UpdateButton({ handleCounterUpdate }) {  return <button onClick={handleCounterUpdate}>Increment couter by one</button>}通過此設(shè)置，可以使用這樣的組件<Counter>  <Display />  <UpdateButton /></Counter>甚至像這樣<Counter>  <Display />  <UpdateButton />  <Display />  <Display /></Counter>沒關(guān)系。在現(xiàn)實世界中，封閉的 Counter 組件（狀態(tài)持有者）將類似于 Layout 組件。在<Layout>模板中使用并呈現(xiàn) MDX 頁面。這看起來像這樣：<SiteLayout>  <SEO title={title} description={description} />  <TopNavigation />  <Display />       // The state holder is <SiteLayout>, not <Counter>   <Breadcrumb location={location} />  <MDXRenderer>{page.body}</MDXRenderer>  // The rendered MDX</SiteLayout>（<UpdateButton>在現(xiàn)實世界中類似<AddToCartButton>）在 MDX 頁面上，不再是<Layout>組件的直接子項。該模式不再起作用。我該如何解決這個問題？