Как я могу использовать компонент React в качестве усилителя? - PullRequest
Новая
       28

Как я могу использовать компонент React в качестве усилителя?

0 голосов
/ 11 июля 2019

Я новичок и реагирую, и у меня есть следующий фрагмент кода: 

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, чтобы передать данные (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);
}

1 Ответ

0 голосов
/ 16 июля 2019

Я думаю, что это должно работать. compose вызовет первый 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)
...