React+TypeScript中JSX内通过引用调用函数的正确方式

首先明确核心逻辑：不管是JavaScript还是TypeScript，在JSX中直接写{myArrowFunction}（不带括号）本质是传递函数对象本身，而非执行函数后的JSX结果。React不会自动执行这个函数生成内容——你之前JS里能渲染的情况大概率是代码存在隐式执行（比如函数被定义成立即执行表达式），或是混淆了组件引用与函数调用。

针对你的场景，TypeScript中推荐两种标准实现方式：

1. 直接调用函数（最直观） #

如果myArrowFunction只是生成一段动态JSX的工具函数，直接在JSX中通过{myArrowFunction()}调用是最简单直接的做法。每次组件渲染时，函数会被执行并返回对应的JSX元素，TypeScript能完成严格的类型校验：

const MyComponent = () => {
  const myArrowFunction = () => <p>Some Paragraph</p>;

  return (
    <div>
      {myArrowFunction()} {/* 正确渲染内容 */}
    </div>
  );
};

2. 封装为React组件（更符合组件化模式） #

如果这段JSX是相对独立的UI单元，建议把它定义成独立的函数组件，通过组件标签的方式引用：

// 定义独立组件
const MyParagraph = () => <p>Some Paragraph</p>;

const MyComponent = () => {
  return (
    <div>
      <MyParagraph /> {/* 组件方式调用，符合React设计思维 */}
    </div>
  );
};

这种方式的优势在于：

• 契合React组件化思维，便于后续复用和扩展（比如需要传递props时更自然）
• TypeScript能自动推断组件类型，提供更严谨的类型检查

为什么TypeScript中{myArrowFunction}不生效？ #

TypeScript的类型系统会严格区分「函数类型」和「React元素类型」。当你在JSX中传递函数对象时，TypeScript会识别到这不是合法的React节点类型（React节点仅支持ReactElement、字符串、数字、null/undefined等），因此不会渲染内容；而{myArrowFunction()}会执行函数并返回合法的React元素，所以能正常渲染。

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