创建包装器/高阶组件​​包装器？

Question

我收到此错误：渲染未返回任何内容。这通常意味着缺少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>
)}

Answer 1

这是您的所有代码吗？

也许您的常量“包装器”应该是带有大写W的“包装器”。

Answer 2

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