创建一个从服务器提供上下文数据的 React HOC

Question

我想创建一个类似于 react-router 的 HOC，它为组件提供一些与上下文相关的数据。上下文数据需要从服务器获取。

  import React, { Component } from "react";

export function withSearchContext(ComponentToWrap) {
  return class extends Component {

    //should actually come from server
    state = {
      searchContext: {
        key: "adedd34ddDdd1"
      }
    };

    componentDidMount() {
      this.getContextFromServer();
    }

    getContextFromServer() {
      this.props.getContextFromServer().then(response => {
        this.setState({searchContext: response.data});
      });
    }

    render() {
      return (
        <ComponentToWrap {...this.props} searchContext={this.state.searchContext} />
      );
    }
  };
}

我正在使用它

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

@withSearchContext
class AccountDetail extends Component<{}, {}> {
  componentDidMount = () => {
    console.log(this.props.searchContext);
  };

   render() {
     if(this.props.searchContext.key){
      return (
        <div className="detail-view flex-container">
          {this.props.searchContext.key}
        </div>
     } 
     return <div> Loading ... </div>;
    );
   }
}

问题是我包装它的每个组件都会调用 HOC。因此，对服务器的调用会发生多次。但是，我只需要 HOC 运行一次并向使用 HOC 的任何组件提供上下文。如何在 React 中实现这一点？

Answer 1

如果您使用Redux，最好将响应对象存储在存储中并通过连接的组件访问它。其余的答案是如何完成，但不建议这样做。在context 方法中，您需要确保在呈现应用程序之前完成req/res，这意味着在收到响应后调用ReactDOM.render。

您可以通过使用 React context 的 <SearchContextProvider /> 组件来实现这一点。然后使用 HOC 返回知道上下文的组件。包装您的应用程序后实例化提供程序并将响应对象作为道具传递。以下是高级解决方案。

SearchContextProvider.js

class SearchContextProvider extends React.Component {
  static childContextTypes = {
    search: PropTypes.object
  };

  getChildContext() {
    return { search: this.props.search };
  }

  render() {
    return this.props.children; // React16
  }
}

App.js

<SearchContextProvider search={data}>
  <App />
</SearchContextProvider>

withSearchContext.js

export function withSearchContext(ComponentToWrap) {
  return class extends React.Component {
    static contextTypes = {
      search: PropTypes.object
    };

    render() {
      return (
        <ComponentToWrap 
          {...this.props} 
          search={this.context.search} 
        />
      );
    }
  };
}