警告:函数不适用于React子HOC

时间:2019-01-21 15:42:56

标签: javascript reactjs higher-order-components

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

  

“函数作为React子代无效。如果您   从渲染返回Component而不是<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>

        )
    }

}

2 个答案:

答案 0 :(得分:2)

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

相反,您的HOC应该接受实际组件并返回新的包装组件。

这可能会解决您的问题。

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

答案 1 :(得分:0)

  

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