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}获取线索，或者如果我在正确的轨道上，我可以为您提供更多帮助。

<强>更新

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

<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组件，您应该这样做：

<table id="mytable">
  <tr>
    <th>
      <div>A</div>
      <input id="searchbox0" type="text" onkeyup="Filter(0)" placeholder="Filter..">
    </th>
    <th>
      <div>B</div>
      <input id="searchbox1" type="text" onkeyup="Filter(1)" placeholder="Filter..">
    </th>
  </tr>
  <tr>
    <td>04718J00065</td>
    <td>2100305513</td>
  </tr>
  <tr>
    <td>29417J01131</td>
    <td>2100305513</td>
  </tr>
  <tr>
    <td>07416J01979</td>
    <td>2100029648</td>
  </tr>
  <tr>
    <td>02518J01169</td>
    <td>2100030939</td>
  </tr>
</table>

以官方的React文档为例： https://reactjs.org/docs/higher-order-components.html

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

3 个答案: