Javascript 用其他函数包装功能性JSX组件

我想创建一个功能组件，它包装其他组件并在其呈现方法中使用JSX。我在网上看到了很多关于如何使用类组件实现这一点的内容，但我很好奇它是否适用于功能组件

function WrappedContent() {
  return <p>I'm wrapped</p>
}

function Wrapper(WrappedComponent) {
  return (
    <div>
      <p>Wrapped: </p>
      <WrappedComponent />
    </div>
  )
};


function App() {
  return (
    <div>
      <Wrapper>
        <WrappedContent />
      </Wrapper>
    </div>
  )
}

我猜这与如何通过道具将子组件传递到中有关

---

下面是一个包含上述代码的代码沙盒：

传递给功能组件的是props，子元素包含在props中。children:

---

传递给功能组件的是props，子元素包含在props.children中：

通过道具，孩子

是的：

函数包装内容{ return我被包裹住了

} 函数包装器{ 回来 包装：

{props.children} } 功能应用程序{ 回来 } ReactDOM.render、document.getElementByIdroot； 通过道具，孩子

是的：

函数包装内容{ return我被包裹住了

} 函数包装器{ 回来 包装：

{props.children} } 功能应用程序{ 回来 } ReactDOM.render、document.getElementByIdroot；

---

你可以试试这样的

function WrappedContent() {
  return <p>I'm wrapped</p>
}

function Wrapper(props) {
  return (
    <div>
      <p>Wrapped: </p>
      {props.children}
    </div>
  )
};


function App() {
  return (
    <div>
      <Wrapper>
        <WrappedContent />
      </Wrapper>
    </div>
  )
}

---

您可能还想参考这篇文章

您可以尝试类似的内容

function WrappedContent() {
  return <p>I'm wrapped</p>
}

function Wrapper(props) {
  return (
    <div>
      <p>Wrapped: </p>
      {props.children}
    </div>
  )
};


function App() {
  return (
    <div>
      <Wrapper>
        <WrappedContent />
      </Wrapper>
    </div>
  )
}

---

您可能还想在下一次阅读本文

，请注意，Stack Overflow的堆栈片段支持React，包括JSX。使用现场代码片段有助于人们帮助您。下一次，请注意Stack Overflow的堆栈代码片段支持React，包括JSX。使用现场片段有助于人们帮助您。太好了，谢谢。如果我想向WrappedComponent添加一个属性，比如onDoubleClick或ref？@labarna-In Wrapper？您不会这样做，因为在调用包装器之前已经创建了元素。你需要在传递给包装器的组件中这样做。明白了，好的，我必须重新考虑我的策略。。。我正在尝试创建一个可编辑的包装，双击时显示输入，然后调用子组件在编辑后更新其状态。太好了，谢谢。如果我想向WrappedComponent添加一个属性，比如onDoubleClick或ref？@labarna-In Wrapper？您不会这样做，因为在调用包装器之前已经创建了元素。你需要在传递给包装器的组件中这样做。明白了，好的，我必须重新考虑我的策略。。。我试图创建一个可编辑的包装器，在双击时显示输入，然后在编辑后调用子组件更新其状态。