Question

我正在尝试创建一个函数，它将返回一个用和元素包装的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 />
  )
}

我担心我仍然习惯了语法，无法弄清楚

Answer 1

首先，你需要使用根元素，exp的div或者React 16.2中释放的Fragment来包装返回，在这个exp中我使用了div：

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

已编辑：您也可以使用渲染子方法：

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

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

看看这个codesandbox exp。

Answer 2

正确的语法应该是

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

也许如果您在wrap方法中使用render

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

用于包装jsx元素的React函数

2 个答案: