javascript - 用其他功能包装功能性 JSX 组件

Question

我想创建一个功能组件，它包装其他组件并在其渲染方法中使用 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>
  )
}

我猜这与子组件传递到 <Wrapper> 的方式有关。 (通过 props.children？)。

这是一个包含上述代码的代码框:https://codesandbox.io/embed/gifted-cray-bqswi

Answer 1

(via props.children?)

是的:

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>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

请注意，Wrapper 接受名为 props 的参数，并使用 props.children。如果您没有任何其他 Prop (或者即使您有，但数量很少)，您可以通过解构来实现:

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