为何React渲染内容中无法直接使用箭头函数？附场景示例

问题场景 #

组件需要在多处访问同一变量，尝试在React渲染的JSX插值中直接用箭头函数定义变量并返回Button组件，代码如下：

return (
  ...
      <div>
        {() => {
          const thisView = "day";
          return (
            <Button
              isActive={calendarView === thisView}
              onClick={() => {
                setCalendarView(thisView);
              }}
            >
              Daily
            </Button>
          );
        }}
      </div>
  ...
)

运行时报错：

Type '() => React.JSX.Element' is not assignable to type 'ReactNode'.

但用[null].map包裹箭头函数后却能正常运行：

return (
  ...
      <div>
        {[null].map(() => {
          const thisView = "day";
          return (
            <Button
              isActive={calendarView === thisView}
              onClick={() => {
                setCalendarView(thisView);
              }}
            >
              Daily
            </Button>
          );
        })}
      </div>
  ...
)

疑问：为何直接在渲染位置使用箭头函数不可行？只想在渲染函数内定义该变量，不想放到外部。

原因解析 #

• 直接写箭头函数的问题：JSX插值{}里需要的是ReactNode类型（比如React元素、字符串、null、数组等），但你直接写的是一个未执行的箭头函数——React拿到的是函数本身，不是函数执行后的返回值，类型不匹配，所以抛出类型错误。
• [null].map能运行的原因：map方法会遍历数组，自动执行你传入的箭头函数，把每个函数的返回值（也就是Button组件）收集成一个数组返回。而数组属于ReactNode的合法类型，所以React能正常渲染这个数组里的元素。

更合适的解决方案 #

用[null].map属于取巧的写法，推荐以下几种更清晰的方式：

1. 立即执行函数表达式（IIFE） #

直接在插值里执行箭头函数，让React拿到函数的返回值：

return (
  ...
      <div>
        {(() => {
          const thisView = "day";
          return (
            <Button
              isActive={calendarView === thisView}
              onClick={() => setCalendarView(thisView)}
            >
              Daily
            </Button>
          );
        })()}
      </div>
  ...
)

2. 在return前定义变量 #

如果只是需要在JSX里复用变量，直接在组件的渲染逻辑（return语句之前）定义即可，这样JSX里能直接访问：

const MyComponent = () => {
  const [calendarView, setCalendarView] = useState("");
  // 直接在return前定义变量，作用域覆盖整个渲染逻辑
  const thisView = "day";
  
  return (
    ...
        <div>
          <Button
            isActive={calendarView === thisView}
            onClick={() => setCalendarView(thisView)}
          >
            Daily
          </Button>
        </div>
    ...
  );
};

3. 拆分子组件 #

如果这类按钮有多处复用，可以把逻辑抽成独立的子组件，通过props传递状态和回调：

const ViewButton = ({ viewName, currentView, onSetView }) => {
  return (
    <Button
      isActive={currentView === viewName}
      onClick={() => onSetView(viewName)}
    >
      {viewName.charAt(0).toUpperCase() + viewName.slice(1)}
    </Button>
  );
};

// 在父组件中使用
const MyComponent = () => {
  const [calendarView, setCalendarView] = useState("");
  
  return (
    ...
        <div>
          <ViewButton 
            viewName="day" 
            currentView={calendarView} 
            onSetView={setCalendarView} 
          />
        </div>
    ...
  );
};

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