Question

我是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组件用作另一个React组件的 enhancer ，以将使用props.viewer.id的数据（compose(addDataEnhancer, ...)）传递给其他高阶组件（例如就能使用props.viewer.id）。我该怎么办？

上下文：想法是使用此MyCoolComponent代替此处的数据源功能：

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

Answer 1

我认为这应该有效。 compose将使用基本组件调用first hoc，然后将返回值（包装的组件）传递给下一个hoc（下一个compose参数），等等。基本组件（以及此HOC之后列出的每个HOC）都将具有属性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)

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

1 个答案: