使用 recompose 映射从上下文中消耗的道具答案

【问题标题】：Use recompose to map props consumed from context使用 recompose 映射从上下文中消耗的道具
【发布时间】：2019-02-04 14:17:55
【问题描述】：

我有一个功能组件，需要渲染道具 height 和 width。我们就叫它PureSizableDiv：

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

我还有一个名为 Size 的 React 上下文：

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.

【问题讨论】：

标签： javascript reactjs higher-order-components recompose react-context

【解决方案1】：

我已经连接了我的组件，但我没有正确使用 Context API。我修复了代码，它使用来自recompose 的fromRenderProps 完美运行。工作代码：

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>

【讨论】：

【解决方案2】：

您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

出现错误是因为您没有使用 compose 导出组件：

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

【讨论】：