我正在用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>
)
}
}
答案 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