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

Question

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

情况很简单，解释如下:

在主页中我有这样的内容:

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

在包装器“组件”中，我想公开一个名为 foo_method 的方法，它是对 Web 服务器的 Ajax 调用。结果必须以Wrapped Component的状态写入。

现在，WrappedComponent 可以调用 foo_method 但在 Wrapper 内部时，我没有 Wrapped 状态的范围，并且 this.props 包含 HomePage 的 props，而不是包装器，所以我不能在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}
               />
            );
        }
    }
}