如何使用 React 组件作为增强器？答案

【问题标题】：How can I use React component as an enhancer?如何使用 React 组件作为增强器？
【发布时间】：2019-11-21 06:28:37
【问题描述】：

我是 React 新手，我有以下代码：

class MyCoolComponent extends React.Component {
  render() {
    return (
      <QueryRenderer
        environment={environment}
        query={graphql`
          query UserQuery {
            viewer {
              id
            }  
          }
        `}
        variables={{}}
        render={({error, props}) => {
          if (error) {
            return <div>Error!</div>;
          }
          if (!props) {
            return <div>Loading...</div>;
          }
          return <div>User ID: {props.viewer.id}</div>;
        }}
      />
    );
  }
}

我想将此 React 组件用作 enhancer 到不同的 React 组件，以使用 compose(addDataEnhancer, ...) 将数据 (props.viewer.id) 传递给另一个高阶组件（这样它会可以使用props.viewer.id)。我该怎么做？

上下文：想法是在这里使用这个MyCoolComponent作为数据源函数的替代品：

export default compose(
  // data source
  graphql(gql`query MyQuery1 { ... }`),
)(MyHOCComponent);
function MyHOCComponent({ data }) {
  console.log(data);
}

【问题讨论】：

标签： reactjs relayjs

【解决方案1】：

我认为这应该可行。 compose 将使用基本组件调用第一个 hoc，然后将返回值（包装组件）传递给下一个 hoc（下一个 compose 参数），等等... 基础组件（以及在此 HOC 之后列出的每个 HOC）将具有 prop viewerId

// withViewerId.js

import React from 'react'
import { QueryRenderer, graphql } from 'react-relay'
import environment from 'environment'

export default (BaseComponent) => (restProps) => (
  <QueryRenderer
    environment={environment}
    query={graphql`
      query UserQuery {
        viewer {
          id
        }  
      }
    `}
    variables={{}}
    render={({error, props}) => {
      if (error) {
        return <div>Error!</div>;
      }
      if (!props) {
        return <div>Loading...</div>;
      }
      return <BaseComponent {...restProps} viewerId={props.viewer.id} />;
    }}
  />
)

用法：

import withViewerId from 'withViewerId'

export default compose(withViewerId)(BaseComponent)

【讨论】：