使用React Provider时出现Context Consumer子节点类型错误警告

触发的报错信息 #

控制台持续抛出两类同规则的警告，核心提示为：

Context Consumer 被渲染时传入了多个子节点，或是传入了非函数类型的子节点。Context Consumer 要求传入单个函数类型的子节点，若您确实传入了函数，请确保该函数前后无多余的首尾空白字符。

触发报错的代码片段 #

function MiveJat() {
  const consumer = React.useContext(abAnarContext);
  console.log(consumer);
  return (
    <abAnarContext.Consumer>
      <div>GOlabi</div>
    </abAnarContext.Consumer>
  );
}

报错根因 #

React 内置的<Context.Consumer>组件有明确的硬性渲染规则：传入的子节点必须是单个函数，这个函数会接收到当前Context的实际值作为入参，函数的返回值才是Consumer最终要渲染的UI内容。
你在代码里直接把普通DOM节点<div>GOlabi</div>作为Consumer的子节点传入，既不是函数类型，也不符合Consumer的调用约定，因此触发警告。
另外你已经在组件顶层通过React.useContext(abAnarContext)拿到了Context值，后续写的Consumer逻辑本身就是冗余代码，还写得不符合API规范。

修正方案 #

两种合规的实现方式均可：

• 方案1：保留Consumer标签，补全符合规范的函数子节点逻辑

  function MiveJat() {
    return (
      <abAnarContext.Consumer>
        {(contextValue) => {
          // 此处可基于contextValue执行业务逻辑
          return <div>GOlabi</div>
        }}
      </abAnarContext.Consumer>
    );
  }
  

• 方案2：删除冗余的Consumer标签，直接使用已经引入的useContext Hook完成取值，这也是函数组件场景下的最优实践

  function MiveJat() {
    const contextValue = React.useContext(abAnarContext);
    // 此处可基于contextValue执行业务逻辑
    return <div>GOlabi</div>;
  }
  

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