如何在JSX内部独立使用函数？React代码报错求助

算力阿峰

2026-5-15

问题分析与解决

嘿，我来帮你搞定这个问题～你遇到的核心问题是：你在JSX里只是定义了一个箭头函数，但没有调用它，所以React并不会执行这个函数来渲染它返回的<div>Hello World</div>，反而会把这个函数对象当作普通的JavaScript值来处理，自然看不到预期的内容。

为什么你的代码不工作？

看一下你的这段代码：

class ABCD extends React.Component {
  render() {
    return (
      <div>
        <p>
          {() => <div>Hello World </div>}
        </p>
      </div>
    );
  }
}

这里{}里的内容是一个箭头函数的定义，而不是函数执行后的结果。React在解析JSX时，会把这个函数对象转换成字符串（比如显示() => <div>Hello World </div>或者类似的函数toString结果），而不是渲染函数返回的JSX节点。

正确的写法：执行你的函数

官方文档说的“在JSX中使用函数代码”，其实是指可以调用函数并让它返回JSX，不管这个函数是外部定义的还是在JSX内部临时定义的。你有几种方式可以修改代码：

方式1：立即执行匿名函数（IIFE）

直接在函数定义后加()，让它立刻执行并返回JSX：

class ABCD extends React.Component {
  render() {
    return (
      <div>
        <p>
          {(() => <div>Hello World </div>)()}
        </p>
      </div>
    );
  }
}

方式2：先定义函数再调用

把函数提前定义在render方法里，然后在JSX中调用它：

class ABCD extends React.Component {
  render() {
    // 先定义函数
    const renderHello = () => <div>Hello World </div>;
    return (
      <div>
        <p>
          {renderHello()} {/* 调用函数 */}
        </p>
      </div>
    );
  }
}