用于包装 jsx 元素的反应函数答案

【问题标题】：React function to wrap a jsx element用于包装 jsx 元素的反应函数
【发布时间】：2018-01-15 00:07:06
【问题描述】：

我正在尝试创建一个函数，该函数将返回一个用 and 元素包裹的 jsx 元素。如何做到这一点？

在我的代码中，我有很多以下内容：

<Top />
<Home />
<Bottom />

<Top />
<About />
<Bottom />

<Top />
<Contact />
<Bottom />

<Top />
<Blog />
<Bottom />

<Top />
<API />
<Bottom />

等等

如何创建一个函数，将 <Home /> 作为输入参数并返回一个包装好的 jsx 元素？

我试过了：

function wrap(???){
  return (
    <Top />
    //what goes here????
    <Bottom />
  )
}

恐怕我还是习惯了语法，搞不懂

【问题讨论】：

您不需要将 React.Component 对象传递给 wrap() 并在您放置评论的位置插入 {component} 吗？
感谢@Carlo，但恐怕我无法弄清楚所需的语法...... ;(

标签： javascript reactjs jsx

【解决方案1】：

首先，您需要使用根元素、用于 exp 的 div 或在 React 16.2 中发布的 Fragment 包装返回，在此 exp 中我使用了 div：

function wrap(Wrapped) {
  return (
    <div>
      <Top />
        <Wrapped />
      <Bottom />
    </div>
  )
}

已编辑：您也可以使用 render children 方法：

const WrapperExp = props => {
    return (
      <div>
        <h1>top</h1>
          {props.children}
        <h1>bottom</h1>
      </div>
    )
};

const App = () => (
  <WrapperExp>
    <h2>tada...</h2>
  </WrapperExp>
);

看看这个codesandbox exp。

【讨论】：

【解决方案2】：

正确的语法应该是

function wrap(component) {
  return (
    <Top />
      {component}
    <Bottom />
  );
}

如果你在 render 方法中使用 wrap 可能

render() {
  const aComponent = (<Home/>);
  return (
    {wrap(aComponent)}
  );
}

【讨论】：

有趣...非常棒！