创建包装器/高阶组件包装器？答案

【问题标题】：Create wrapper/higher order component wrapper?创建包装器/高阶组件包装器？
【发布时间】：2018-12-20 20:09:13
【问题描述】：

我收到此错误：渲染未返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

// const wrapper = (props) => props.childen;
// export default wrapper;

但是，如果我把它变成一个类，它就可以工作。

import React, { Component } from 'react';

class Wrapper extends Component {
  render() {
    return (
      this.props.children
    );
  }
}

export default Wrapper;

我做错了吗？

我想这样使用它：（在另一个组件中）

render() {
    return (
    <Wrapper>
        <div></div>
        <div></div>
        <div></div>
    </Wrapper>
)}

【问题讨论】：

在div 的任何一个元素中加入一些东西，这将起作用（例如<div>foobar</div>）codesandbox.io/s/l5r02kxwq

标签： javascript reactjs

【解决方案1】：

您在Wrapper 的功能组件版本中有错字。应该是props.children 而不是props.childen。

function App() {
  return (
    <div className="App">
      <Wrapper>
        <div>1</div>
      </Wrapper>
    </div>
  );
}

const Wrapper = props => props.children;

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

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

<div id="root"></div>

【讨论】：

【解决方案2】：

这是你所有的代码吗？

也许你的 const "wrapper" 应该是带有大写 W 的 "Wrapper"。

【讨论】：