Question

我想创建一个包装其他组件并在其render方法中使用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.children传递到<Wrapper>中有关。

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

Answer 1

（通过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。如果没有其他道具（或者即使有，但数量很少），也可以通过销毁来实现：

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

Answer 2

传递到功能组件的是True，子元素包含在props中：

props.children

https://codesandbox.io/embed/priceless-borg-brlbk

Answer 3

您可以尝试这样的事情。

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

您可能还想参考这篇文章https://reactjs.org/docs/composition-vs-inheritance.html

将功能性JSX组件与其他功能包装在一起

3 个答案: