React 16.3.0 Context API多嵌套消费者报错问题求助

我之前也遇到过类似的情况，用HOC封装Context消费逻辑时，嵌套组件就报错，大概率是HOC的写法有疏漏或者上下文的使用姿势不对。咱们一步步来排查和修复：

先确认Context的创建是否正确 #

首先要保证你的CssModuleContext是正确创建的，记得设置合理的默认值，避免组件在Provider外渲染时拿到undefined：

// CssModuleContext.js
import React from 'react';

// 给个默认空对象，避免后续调用cssModules.xxx时抛错
const CssModuleContext = React.createContext({});

export default CssModuleContext;

修复HOC的写法 #

你的HOC可能存在没有传递完整props或者Consumer使用错误的问题，下面是修正后的完整HOC代码：

// withCssModule.js
import React from 'react';
import CssModuleContext from './CssModuleContext';

export default function withCssModule(Component) {
  // 给包装后的组件起个清晰的名字，方便React DevTools调试
  const CssModuleEnhanced = (props) => (
    <CssModuleContext.Consumer>
      {/* 必须用函数接收上下文值，然后把props和上下文一起传给原组件 */}
      {(cssModules) => <Component {...props} cssModules={cssModules} />}
    </CssModuleContext.Consumer>
  );

  // 继承原组件的displayName，调试更友好
  CssModuleEnhanced.displayName = `withCssModule(${Component.displayName || Component.name || 'Component'})`;

  return CssModuleEnhanced;
}

正确嵌套使用示例 #

现在用这个HOC包装组件，嵌套使用就不会报错了：

1. 顶层Provider注入CSS模块 #

// App.js
import React from 'react';
import CssModuleContext from './CssModuleContext';
import withCssModule from './withCssModule';
import Button from './Button';
import Card from './Card';

// 导入你的CSS模块
import appStyles from './App.module.css';

// 用HOC包装组件
const StyledButton = withCssModule(Button);
const StyledCard = withCssModule(Card);

function App() {
  return (
    {/* 把CSS模块作为上下文值注入 */}
    <CssModuleContext.Provider value={appStyles}>
      <StyledCard>
        {/* 嵌套使用包装后的组件，完全没问题 */}
        <StyledButton>点击我</StyledButton>
      </StyledCard>
    </CssModuleContext.Provider>
  );
}

export default App;

2. 被包装的子组件示例 #

// Button.js
import React from 'react';

function Button({ cssModules, children }) {
  return <button className={cssModules.button}>{children}</button>;
}

export default Button;

// Card.js
import React from 'react';

function Card({ cssModules, children }) {
  return <div className={cssModules.card}>{children}</div>;
}

export default Card;

常见错误原因排查 #

如果还是报错，你可以检查这几点：

• 是否所有消费组件都在Provider范围内：如果某个嵌套组件跑到Provider外面了，会拿到Context的默认值，要是默认值没设置就会是undefined，调用cssModules.xxx就会抛错。
• HOC是否传递了所有props：如果HOC里没写{...props}，原组件需要的props传不进去，可能会引发prop缺失的错误。
• Consumer的子元素是否是函数：Context.Consumer必须接收一个函数作为子元素，用来接收上下文值，要是直接写组件标签肯定会报错。

内容的提问来源于stack exchange，提问作者vardius