ReactJs - 从HOC包装器访问包装状态

Question

我试图使用HOC模式而不是面向对象来避免冗余代码。

情况很简单，如下所述：

在HomePage中，我有类似的内容：

const WrappedComponent = Wrapper(Wrapped);
<WrappedComponent { ...this.props } />

在Wrapper＆＃34;组件＆＃34;中，我想公开一个名为foo_method的方法，它是对WebServer的Ajax调用。结果必须以Wrapped Component的状态写入。

现在，WrappedComponent可以调用foo_method但是当在Wrapper中时，我没有Wrapped状态的范围而this.props包含HomePage的支持，而不是包装器所以我不能在Wrapper中创建一个回调函数调用。

我是否忘记了实施HOC的事情？

Answer 1

我认为你的HOC看起来应该是这样的，每个WrappedComponent都会在props中得到结果（加载时为null，之后是API响应），包装组件也可以通过props.fetchFunction（）手动调用公开的fetch函数。

function Wrapper(WrappedComponent) {
    const fetchData = () => {
         return fetch('something');
    };

    return class extend React.Component {
        constructor(props) {
             super(props);
             this.state = {
                 result: null,
             };
        }
        componentDidMount() {
             fetchData().then((result) => {
                  this.setState({result});
             });
        }
        render() {
            return (
               <WrappedComponent
                   result={this.state.result}
                   fetchFunction={fetchData}
                   {...this.props}
               />
            );
        }
    }
}