警告：函数作为 React 子 HOC 无效答案

【问题标题】：Warning: Functions are not valid as a React child HOC警告：函数作为 React 子 HOC 无效
【发布时间】：2019-06-15 00:58:19
【问题描述】：

我正在用 Reactjs 编写 HOC。当我要在WithErrorHandler HOC 中返回课堂时，我在控制台中收到警告说

“函数作为 React 子级无效。如果你从渲染返回一个组件而不是<Component />。或者也许你意味着调用这个函数而不是返回它。”但是，如果我删除类，警告将消失。

我将为 Modal 添加点击处理程序以使其能够关闭。此外，我将从错误中获取消息，该消息已作为第二个函数的参数传递，以便在 Modal 中显示。

import React, { Component } from 'react';
import Modal from '../Modal'

const WithErrorHandler = WrappedComponent => ({ error, children }) => {

return(

  class extends Component {
state = {modalShow: false}   
modalToggle = ()=> {
this.setState(ModalShow: !!error.message)}
    render() {
      return (
        <WrappedComponent>
          {error && <Modal type={error.messageType} message={error.message} />}
          {children}
        </WrappedComponent>
      );
      }
    }

)  
};

const DivWithErrorHandling = WithErrorHandler(({children}) => {
  return children
})

class App extends Component {
    state ={error: null}
    someMethode = ()=> {
      const sampleError = {//an object with message key}
      this.setState(error: sampleError)
    }
    Render(){
        return (
          <DivWithErrorHandling error={this.state.error} >
            <h1>Component</h1>
            <button onClick={this.someMethode}>
               Toggle Error
            </button>
          </DivWithErrorHandling>

        )
    }

}

【问题讨论】：

您能否再添加一个示例来说明如何应用此 HOC？
您好，您可以尝试以下方法吗？ ``` const WithErrorHandler = WrappedComponent => ({ error, children }) => { return props =>( return ( ```

标签： javascript reactjs higher-order-components

【解决方案1】：

您的 HOC 正在接受实际组件并返回一个子函数（包装器组件），该函数再次返回一个类组件。

而不是您的 HOC 应该接受实际组件并返回一个新的包装组件。

这应该可以解决您的问题。

const WithErrorHandler = WrappedComponent => ({ error, children }) => {
  return(
    <WrappedComponent>
      {error && <Modal type={error.messageType} message={error.message} />}
      {children}
    </WrappedComponent>
  );
};

【讨论】：

感谢您的回复。但是，正如我所说，我将在匿名类中为 Modal 添加关闭事件方法。因为 Modal 有关闭它的方法。是的，它可以在没有匿名类的情况下工作。
我知道它可以不用上课。我将在 Modal 中使用一些功能。所以，我应该你在里面上课。
@Xman2018 作为惯例，您可能希望将withEventHandler 小写，因为大写用于实际组件，而 HoC 只是一种返回组件的方法。
@SungKim 感谢您的评论，虽然没有解决我的主要问题。
这个 Modal 组件应该提供服务，以便在这个 HOC 中处理所有全局消息。在 HOC 中上课是强制性的。

【解决方案2】：

HOC 是一个接受一个组件并返回一个新组件的函数

您的代码：

const WithErrorHandler 
    = WrappedComponent // takes a component
         => ({ error, children }) // takes some params
              => class ... // returns a new component

你真正想要的：

const WithErrorHandler 
    = WrappedComponent // takes a component
         => class ... // returns a new component
            // inside the class use this.props.error, this.props.children, etc.

另一种方式（使用功能组件）：

const WithErrorHandler 
    = WrappedComponent // takes a component
         => ({ error, children }) =>  <WrappedComponent>...</WrappedComponent> // returns a new component

【讨论】：