HOC：必须返回有效的React元素（或null）

Question

我正在尝试创建HOC以包装模态，并且我收到此错误：A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我检查了其他一些线程，问题主要似乎是进口 - 但我不相信这是这种情况。这是我的代码：

创建-modal.js

import { Component } from 'react'
import withRedux from 'next-redux-wrapper'
import Layout from '../../components/layouts/main'
import ModalContainer from './modal-container'

// Modal Layouts
import Empty from './empty'
import Basic from './basic'

const data = {
  title: 'Silly Modal.',
  layout: 'empty',
  customClass: '',
  multiStep: false,
  steps: [
    {
      isVisible: true,
      isAnimated: false,
      animationName: null,
      header: 'TEST',
      currentContent: 'Testing the modal. What fun!',
      buttons: {
        closeText: 'Close',
        closeAction: null,
        continueText: null,
        continueAction: null,
      },
      closeRedirect: null,
      closeRedirectPath: null,
      continueRedirect: null,
      continueRedirectPath: null,
    },
  ],
}

function newModal (WrappedComponent, data) {
  if (!WrappedComponent && !data) return null

  return class Modal extends Component {
    constructor (props) {
      super(props)
    }
    render () {
      return (
        <Layout>
          <ModalContainer>
            <WrappedComponent />
          </ModalContainer>
        </Layout>
      )
    }
  }
}

console.log('what is newModal returning?!', (newModal(<Basic />, data)) )

export default newModal

console.logging调用此HOC的返回显示它正在返回一个函数而不是一个组件：

function Modal(props) {
      (0, _classCallCheck3.default)(this, Modal);
      return (0, _possibleConstructorReturn3.default)(this, (Modal.__proto__ || (0, _getPrototypeOf2.default)(Modal)).call(this, props…

这似乎不对。

我还应该注意到，我可能做错了这个回复（但我不确定。但是我尝试过return <WrappedComponent />但结果相同:(

我导入的所有组件都导出为default，因此我不相信导入中的括号是正确的。我是HOC的新手，我只是没有看到什么是错的，因为我正在遵循我亲眼看到的模式。任何帮助表示赞赏！

Answer 1

您将使用以下语句返回类构造函数：

return class Modal extends Component {

这就是为什么它在抱怨

您可能只是使用纯React组件，因为您似乎不需要道具或状态。

这会让你解决这个问题，但我怀疑你需要以不同的方式做到这一点，因为它看起来像你想传入一个元素，并在一个模态包装器中渲染该元素。

查找如何使用{this.props.children}获取线索，或者如果我走在正确的轨道上，我可以为您提供更多帮助。

UPDATE

我想你想要做的就是利用孩子。你可以这样做：

<ModalWrapper name="A modal dialog (which is generic and re-usable)">
  <SomethingElse name="This is my custom component">
     :
     :
  </SomethingElse>
</ModalWrapper>

在ModalWrapper的渲染方法中，你只需渲染{this.props.children}，它会带来你作为孩子的任何标记。

（我不是100％肯定，如果它是{this.props.children}，但你会得到我的漂移

Answer 2

HOC是一个接收组件的函数，它包装它以添加更多功能并返回另一个组件。并不是说您可以在代码中将其用作组件。您可以使用它来增强现有组件。

Answer 3

您没有正确使用HOC组件，您应该这样做：

import Basic from './basic'
...
const NewModal = newModal(Basic, data)
...
render()
<NewModal ... />

请查看官方反应文档中的示例：https://reactjs.org/docs/higher-order-components.html