Используйте «Рекомендовать» для сопоставления реквизита, использованного из контекста. - PullRequest
Новая
       22

Используйте «Рекомендовать» для сопоставления реквизита, использованного из контекста.

0 голосов
/ 29 августа 2018

У меня есть функциональный компонент, который требует рендеринга реквизитов height и width. Давайте назовем это PureSizableDiv: 

const PureSizableDiv = ({ height, width }) =>
    <div style={{ height, width }}>I'm a div!</div>

У меня также есть контекст React, называемый Size: 

import React from 'react';
import { compose, fromRenderProps } from 'recompose';

export const { SizeProvider, SizeConsumer } = React.createContext({
  height: null,
  width: null,
});

Вместо того, чтобы вручную создавать новый HoC, подобный этому: 

export const withSize = Component => (props) =>
  <SizeConsumer>
    {
      ({ height, width }) =>
        <Component
          height={height}
          width={width}
          {...props}
        />
    }
  </SizeConsumer>;

Я хотел бы знать, есть ли более короткий более чистый способ использования recompose для этого. Я пытался 

export const withSize = compose(
  fromRenderProps(SizeConsumer, ({ height, width }) => ({ height, width })),
);

Но получил ошибку Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Я подключил свой компонент, но я не использовал должным образом Context API. Я исправил код, и он работал безупречно, используя fromRenderProps из recompose. Рабочий код: 

import React from 'react';
import { compose, fromRenderProps } from 'recompose';

const PureSizableDiv = ({ height, width }) =>
  <div style={{ height, width }}>I am a div!</div>;

const SizeContext = React.createContext({
  height: null,
  width: null,
});

const withSize = compose(
  fromRenderProps(SizeContext.Consumer, ({ height, width }) => ({ height, width })),
);

// Usage
const Wrapper = ({ children, height, width }) => 
  <SizeContext.Provider
    value={{
      height: height,
      width: width,
    }}
  >
    {children}
  </SizeContext.Provider>;

const SizedDiv = withSize(PureSizableDiv);

// Render components
<Wrapper>
  <SizedDiv/>
</Wrapper>
0 голосов
/ 29 августа 2018

Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и имена.

Появляется ошибка, потому что вы не экспортируете Компонент с compose: 

export const withSize = compose(
  fromRenderProps(SizeConsumer, ({ height, width }) => ({ height, width })),
)(Component);
// ^^
...