React：匿名函数组件无法获取Context？替代命名组件编译失败

你的问题出在两个点：一是JSX里只定义了函数但未执行，二是在嵌套函数里调用useContext违反了React Hooks规则（Hooks必须在组件函数的顶层调用）。以下是两种符合需求的解决方案：

方案1：将上下文逻辑提升到父组件顶层（推荐） #

如果只是简单展示上下文数据，直接把useContext调用放到MyList组件的顶层，然后直接渲染元素即可，完全不需要额外组件：

import { useContext } from 'react';
import MyContext from './MyContext';

export default function MyList() {
  // 符合Hooks规则：在组件顶层调用useContext
  const { dataValueFromContext } = useContext(MyContext);
  
  return (
    <div>
      <span>value: {dataValueFromContext}</span>
    </div>
  );
}

这种写法最简洁，可读性最高，完全不需要创建任何额外的命名或匿名组件。

方案2：内联渲染匿名组件（适合复杂逻辑场景） #

如果需要封装的逻辑比较复杂，又不想创建命名组件，可以用React.createElement直接渲染匿名组件（该匿名组件本身是合法的React组件，内部可正常使用Hooks）：

import { useContext, createElement } from 'react';
import MyContext from './MyContext';

export default function MyList() {
  return (
    <div>
      {createElement(() => {
        // 匿名组件的顶层调用useContext，符合规则
        const { dataValueFromContext } = useContext(MyContext);
        return <span>value: {dataValueFromContext}</span>;
      })}
    </div>
  );
}

注意：这种写法每次渲染都会创建新的匿名组件函数，可能带来微小的性能损耗，适合逻辑复杂但渲染频率不高的场景。

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